JS Password conformation

Question

I have a simple Register page which is :

<html>
<head>
    <title>Register</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
    <form action="">
        <div>
            <label style="display: block; padding-left: 0.3em;">REGISTER</label>
        </div>

        <div class="emailInputDiv">
            <label class="email">Email </label>
            <input type="text" name="email" id="em">
        </div>

        <div class="passwordInputDiv">
            <label class="password">Password</label>
            <input type="password" name="password" id="pw">
        </div>

        <div class="passwordInputDiv2">
            <label class="password">Confirm Password</label>
            <input type="password" name="password" id="pw2">
        </div>

        <div style="margin-bottom: 0.5em">
            <button type="submit" class="signInButton" onclick="check()">
                <span>Sign In</span>
            </button>
        </div>
    </form>


    <script>
        let pw = document.getElementById("pw").value;
        let pw2 = document.getElementById("pw2").value;
        (function () {
            if(pw != pw2){
                $('.passwordInputDiv').css("color", "red");
                $('.passwordInputDiv > input').css("color", "red");
                $('.passwordInputDiv2').css("color", "red");
                $('.passwordInputDiv2 > input').css("color", "red");
            }
        })();

    </script>
</body>
</html>

I wanna make its font color red immediately whenever password inputs change and doesnt match. that self-executing function runs when page loads, but I want it to run everytime those inputs changes.

Also those pw and pw2 is empty since its executed when page is loaded. So fucntion does not execuded.

How can I adjust this?

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event — Bergi, Dec 15 '19 at 13:44
What have you tried so far and what was the problem with your approach? — t.niese, Dec 15 '19 at 13:50

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

To run a Javascript function on every input change you add oninput='exampleJavascriptFunction()' to the HTML element or use Javascript to add an event listener as explained below.

So your first password box:

<input type="password" name="password" id="pw">

would become:

<input type="password" name="password" oninput="check()" id="pw">

Note: It is now better a better practice to use a javascript function to add an event listener.

For example: element.addEventListener([name], [callback]) with plain Javascript or element.on([name], [callback]) with Jquery (which uses addEventListener internaly).

Adding the event listener with Jquery/Javascript:

$("pw").on('input', check)

See Jquery on or MDN input event

Hopefully, this helps.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 15 '19 at 13:51

anbcodes

849
6
15

1

Please don't suggest to use inline event handlers (`oninput="check()"` they really should not be used anymore since the release of IE 9 and even before that it was questionable to use them. – t.niese Dec 15 '19 at 14:00
`Or using event listeners:` is misleading. All of them are event listeners. `oninput="check()"` is an event listener, `element.addEventListener` uses the web API to attach the event listener, and `$("pw").on('input', check)` uses jQuery to attach the event listener (jQuery itself uses (`addEventListener`) internally. – t.niese Dec 15 '19 at 14:04
@t.niese I updated my post to try to make it more clear. – anbcodes Dec 15 '19 at 14:10

JS Password conformation

1 Answers1