Все правила проверки jquery работают правильно (работают onkeyup), но подтверждают, что проверка пароля работает только после нажатия на кнопку отправки

Question

В регистрационной форме все правила проверки jquery работают должным образом (работают onkeyup), но подтверждают, что проверка пароля работает только после onclick на кнопке отправки

Подтвердите, что пароль также должен работать на onkeyup, но не происходит, как другие поля

Все правила проверки jquery работают правильно (работают onkeyup), но подтверждают, что проверка пароля работает только после onclick на кнопке отправки

<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>

Некоторая часть кода HTML:

 ....
    ....
    <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>
    ....
    ....

Спасибо

Answer 1

У вас есть проблема в этой строке,

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

Измените ее на

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

Если вы заметили, что есть проблема с типом Password, который вас беспокоил, измените его наpassword.Он будет работать.

В библиотеке jqueryvalidation он проверяется с помощью [type='password'], а не [type='Password'], по этой причине он не отражается так, как вы хотите.

Пожалуйста, ознакомьтесь с демонстрацией ниже.то же самое.

$.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>