JSFiddle - React, Tailwind, and code Playground

by Vetrivel Samidurai

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Compare Values</title>
</head>
<body>

<form id="myForm" onsubmit="return validateForm()">
    <!-- Your textboxes -->
    <label for="textbox1">Textbox 1:</label>
    <input type="text" id="textbox1" oninput="checkForChanges('textbox1')">
    
    <label for="textbox2">Textbox 2:</label>
    <input type="text" id="textbox2" oninput="checkForChanges('textbox2')">
    
    <!-- Password field -->
    <label for="password">Password:</label>
    <input type="password" id="password">
    
    <!-- Submit button -->
    <input type="submit" value="Submit">
</form>

<script>

</script>

</body>
</html>

JavaScript

// Object to store initial values of textboxes
    var initialValues = {
        textbox1: "10",
        textbox2: "20"
    };

    // Function to set initial values
    function setInitialValue(id, value) {
        initialValues[id] = value;
    }

    // Function to check for changes and update password field
    function checkForChanges(id) {
        var textbox = document.getElementById(id);
        var passwordField = document.getElementById('password');

        // Make password field mandatory if the value has changed
        passwordField.required = initialValues[id] !== textbox.value;
    }

    // Function to validate the form on submit
    function validateForm() {
        // Additional validation logic can be added here if needed
        if (!checkAdditionalValidation()) {
            return false; // Prevent form submission
        }

        return true; // Allow form submission
    }

    // Function to handle additional validation (you can customize this)
    function checkAdditionalValidation() {
        // Example: Check if some condition is met
        // Return true to allow form submission, or false to prevent it
        return true;
    }

    // Set initial values on page load
    window.onload = function () {
        setInitialValue('textbox1', document.getElementById('textbox1').value);
        setInitialValue('textbox2', document.getElementById('textbox2').value);
    };