密码匹配时，javascript禁用/启用提交按钮

Question

i have this html

> <div class="row">
>                     <div class="col-xs-6 col-sm-6 col-md-6">
>                         <div class="form-group">
>                             <input type="password" name="pass1" id="pass1" class="form-control input-lg" placeholder="Password"
> tabindex="3">
>                         </div>
>                     </div>
>                     <div class="col-xs-6 col-sm-6 col-md-6">
>                         <div class="form-group">
>                             <input type="password" name="pass2" id="pass2"  onkeyup="checkPass(); return false;" class="form-control
> input-lg" placeholder="Confirm Password ">
>                            <span id="confirmMessage" class="confirmMessage"></span>
>                       </div>
>                       
>                     </div>
>                   
>                 </div>
>                 
>                 <div class="row">
>                     <input type="submit" id="login" value="Register">
>                   </div>

How can I do something like this:

When the password is empty the submit should be disabled (disabled="disabled").

When something is typed in the passsword to remove the disabled attribute.

If the password field becomes empty again(the text is deleted) the submit button should be disabled again.

When the password does not match,the submit button should be disable

I tried something like this:

 <script type="text/javascript">
function checkPass()
{
    //Store the password field objects into variables ...
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    //Store the Confimation Message Object ...
    var message = document.getElementById('confirmMessage');
    //Set the colors we will be using ...
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    //Compare the values in the password field 
    //and the confirmation field
    if(pass1.value == pass2.value){
        //The passwords match. 
        //Set the color to the good color and inform
        //the user that they have entered the correct password 
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "Passwords Match!"
    }else{
        //The passwords do not match.
        //Set the color to the bad color and
        //notify the user.
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "Passwords Do Not Match!"
        $("#submit").attr("disabled", "disabled");
    }
}  
</script>

the javascript display message if password match or does not match but my problem is when the password does not match the SUBMIT button still go ahead and submit.

Answer 1

You must be changing element property, not attribute:

 $(document).ready(function() { var isDisabled = false; $('#toggler').click(function() { isDisabled = !isDisabled; $('#submit').prop('disabled', isDisabled); }); $('form').submit(function(e) { e.preventDefault(); alert('Submiting'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="#" method="post"> <button type="button" id="toggler">Disable/Enable</button> <button type="submit" id="submit">Submit</button> </form> 

Answer 2

Use something similar:

if (pass1.value && pass2.value && pass1.value == pass2.value) {
    pass2.style.backgroundColor = goodColor;
    message.style.color = goodColor;
    message.innerHTML = "Passwords Match!"
    $("#submit").prop("disabled", false);
} else {
    pass2.style.backgroundColor = badColor;
    message.style.color = badColor;
    message.innerHTML = "Passwords Do Not Match!"
    $("#submit").prop("disabled", true);
}

I added two length checks (if value is "" it is evaluated as false), and added the #prop() call to enable the button, when the two strings match.

Answer 3

Sorry since i can't comment i'll answer instead If you have a form (i assume you do event though i can't see it), you can do it like this

 $("#form").on('submit', function(e) {
  e.preventDefault();
    if(!$('#submit').prop('disabled')){
                $(this).submit();
     }

});

Basically i stop the submission first then check if the button is disabled before submitting the form.