如何使用 Jquery 在单击按钮时隐藏 div

How to hide a div on a button click using Jquery

我正在使用 jquery 验证来验证注册表单。一切正常。但是在id为password_msg的输入类型密码下方的span中有一条消息。此消息显示在提交表单之前。 现在相同的消息也在密码验证消息中。当我点击提交时,两条消息都会显示。当我点击提交时,我需要隐藏 id password_msg 中密码标签下方的消息。只应显示验证消息。

<input name="password" class="form-control" type="password" id="password" placeholder="************">
  <span class="font-13 text-danger" id="password_msg">
    Password should be a minimum of 8 characters including uppercase and lowercase letters, at least 1 number and at least 1 special character (!@#$%^&*).
  </span>
 <div class="col-md-6 col-sm-5 col-xs-6 text-left">
   <button type="submit" class="next_button" name="reg_user">Sign up</button>
 </div>

我的 jquery 是:

$('form[id="validate_form"]').validate({
rules: {
  password: {
        required: true,
            }
 },
messages: {
   ,
    password: {
      required: 'Password should be a minimum of 8 characters including uppercase and lowercase letters, at least 1 number and at least 1 special character (!@#$%^&*).',
               }
 },
  submitHandler: function(form) {
    form.submit();
  }
});

我试图隐藏消息:

$(document).ready(function(){
$('#reg_user').on('click', function(event) {
    $('#password_msg').hide();
});
});

但是两条消息都出现了。

我不明白你的问题,但解决方法可以是下面的代码

$(document).ready(function(){
$('.next_button').on('click', function(event) {
    $('#password_msg').hide();
});
})