jQuery var's aren't functioning

Question

I'm trying to build a form that will check (live) to see whether a person has mismatched a string when entered into text fields. The practice is a user entering data into a password form.

HTML Below:

<div class="form-group">
     <input type="password" name="password" id="password" class="form-control" value="" placeholder="Password" onKeyUp="checkPasswordStrength();">
</div>
<div class="form-group">
      <input type="password" name="vPass" id="cpassword" class="form-control" value="" placeholder="Password">
      <span id="output"></span>
</div>

And below is the jQuery used:

<script type ="text/javascript">
$("#cpassword").blur(function checkPassMatch(){
    var originEmpt = $("#password").text(""); // Checking if input is empty
    var origin = $("#password").text(); // Password
    var conf = $("#cpassword").text(); // Confirm password
    if (origin != conf){
        $("#output").html("<br /><div class=\"alert alert-danger\" role=\"alert\">Whoops, your passwords don't match!</div>"); //Styling from bootstrap
    } else {
        $("#output").html(""); 
    }
    if (originEmpt){ 
        $("#output").html("<br /><div class=\"alert alert-danger\" role=\"alert\">Please enter a password!</div>"); 
    } else{
        $("#output").html(""); 
    }
})
</script>

Through debugging, if I totally remove the first if else statement from the jQuery, I can receive the $("output").html(); as desired.

I have tried for both input fields: $("#password").text() / .val(); / .html(); / .innerHTML();

But the code still fails to check whether one input field matches another. Any ideas why?

1. Use `val`. 2. `var originEmpt = $("#password").text(""); // Checking if input is empty` That doesn't check if it's empty. If it weren't an `input`, that would clear it (it **sets** the text of the input). To check if it's empty, use `var originEmpt = !$("#password");` (negating an empty string gives you `true`; negating a non-empty string gives you `false`). 3. Don't use `=` for comparison (`if (originEmpt = true)`), see linked q. for details. Just use `if (originEmpt)`. **If** you were comparing for equality (unnecessary here, you already have a flag), it would be `==` or `===`, not `=`. — T.J. Crowder, Nov 13 '17 at 18:12
Thank _you_ @T.J.Crowder . My biggest issue was the `var originEmpt = !$("#password")` kept on resetting my string. I should remove your 3rd point in my example as I was using it for debugging. — , Nov 13 '17 at 18:26

score 0 · Answer 1 · answered Nov 13 '17 at 18:10

0

Cause your second checks output overrides the first one. You need to nest it:

if (origin != conf){
    $("#output").html("<br /><div class=\"alert alert-danger\" role=\"alert\">Whoops, your passwords don't match!</div>"); //Styling from bootstrap
} else if (!originEmpt){ 
    $("#output").html("<br /><div class=\"alert alert-danger\" role=\"alert\">Please enter a password!</div>"); 
} else{
    $("#output").html(""); 
}

answered Nov 13 '17 at 18:10

Jonas Wilms

132,000
20
149
151

I have restructured my code to follow yours. There is an issue, however, `(!originEmpt)` would not be looking for whether the input was empty, but in fact whether it was populated, resulting in false positive. – Nov 13 '17 at 18:28

jQuery var's aren't functioning

1 Answers1