All jquery validation rules working properly (working onkeyup) but only confirm password validation working only after onclick on submit button

Question

On registration form, all jquery validation rules working properly (working onkeyup) but only confirm password validation working only after onclick on submit button

confirm password should also work on onkeyup , but not happening like others fields

All jquery validation rules working properly (working onkeyup) but only confirm password validation working only after onclick on submit button

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>    
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>

<script>

  $(document).ready(function () {

    $('#signup').validate({

        rules: {
            "first_name": {
              required: {
                    depends:function(){
                        $(this).val($.trim($(this).val()));
                        return true;
                    }
              }
            },
            "last_name": {
              required: {
                    depends:function(){
                        $(this).val($.trim($(this).val()));
                        return true;
                    }
              }
            },
            "mobile_no": {
              required: {
                    depends:function(){
                        $(this).val($.trim($(this).val()));
                        return true;
                    }
              },
              minlength: 10,
              maxlength: 10,
              digits: true
            },
            "email": {
              required: {
                    depends:function(){
                        $(this).val($.trim($(this).val()));
                        return true;
                    }
              },
              email: true
            },
            "password": { 
              required: true,
              minlength: 4,
              maxlength: 4,
              digits: true
            },
            "conf_password": {
              required: true,
              equalTo: "#mainpassword"
            }
        },
        messages: {
            "first_name": {
              required: "First Name is required"
            },
            "last_name": {
              required: "Last Name is required"
            },
            "mobile_no": {
              required: "Mobile No is required",
              minlength: "Mobile No should be a 10-digit number",
              maxlength: "Mobile No should be a 10-digit number",
              digits: "Mobile No should contain only numbers"
            },
            "email": {
              required: "Email is required",
              email: "Invalid email Id"
            },
            "password": {
              required: "Password is required",
              minlength: "Password should be a 4-digit number",
              maxlength: "Password should be a 4-digit number",
              digits: "Password should contain only numbers"
            },
            "conf_password": {
              required: "Confirm Password is required",
              equalTo: "Password mismatch"
            }
        }
    });
  });
</script>

Some part of HTML code:

 ....
    ....
    <div class="form-group">
        <label for="password" class="col-sm-4 control-label">Password :</label>
            <div class="col-sm-8">
                    <input type="password" class="form-control" name="password" id="mainpassword" placeholder="Enter Password" value="<?=set_value('password')?>">
            </div>
        </div>

        <div class="form-group">
                <label for="conf_password" class="col-sm-4 control-label">Confirm Password :</label>
                    <div class="col-sm-8">
                            <input type="Password" class="form-control" name="conf_password" id="conf_password" placeholder="Confirm Password" value="<?=set_value('conf_password')?>">
                    </div>
        </div>
    ....
    ....

Thanks,

Answer 1

You have problem in this line,

<input type="Password" class="form-control" name="conf_password" id="conf_password"  
 placeholder="Confirm Password" value="<?=set_value('conf_password')?>">

Change it to

<input type="password" class="form-control" name="conf_password" 
id="conf_password" placeholder="Confirm Password" value="<?=set_value('conf_password')?>">

If you notice there is problem with Password type which was troubling you, change it to password . It will work.

In jqueryvalidation library, it is validating with [type='password'] and not [type='Password'] which is the reason it was not reflecting as you want.

Please see below demo for the same.

 $.validator.setDefaults({ submitHandler: function() { alert("submitted!"); } }); $().ready(function() { // validate the comment form when it is submitted // validate signup form on keyup and submit $("#signup").validate({ rules: { password: { required: true, minlength: 4, maxlength: 4, digits: true }, conf_password: { required: true, equalTo: "#mainpassword" }, }, messages: { password: { required: "Password is required", minlength: "Password should be a 4-digit number", maxlength: "Password should be a 4-digit number", digits: "Password should contain only numbers" }, conf_password: { required: "Confirm Password is required", equalTo: "Password mismatch" }, } }); // propose username by combining first- and lastname }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://jqueryvalidation.org/files/dist/jquery.validate.js"></script> <form class="cmxform" id="signup" name="signup" method="get" action=""> <fieldset> <div class="form-group"> <label for="password" class="col-sm-4 control-label">Password :</label> <div class="col-sm-8"> <input type="password" class="form-control" name="password" id="mainpassword" placeholder="Enter Password" value=""> </div> </div> <div class="form-group"> <label for="conf_password" class="col-sm-4 control-label">Confirm Password :</label> <div class="col-sm-8"> <input type="password" class="form-control" name="conf_password" id="conf_password" placeholder="Confirm Password" value=""> </div> </div> <p> <input class="submit" type="submit" value="Submit"> </p> </fieldset> </form>