jQuery.validate和隐藏的输入

Question

我有一个带有伪选择元素的表单.伪选择元素是下拉菜单.单击其中一个下拉项时,会为隐藏的输入指定一个分配给该项的值.我正在使用jQuery.validate来验证表单.一个简单的验证规则绑定到隐藏的输入.如果输入没有值,则隐藏输入和伪选择将被赋予错误类,并显示错误消息.

我的问题是更改隐藏输入的值不会触发更改,键入或模糊事件.如果将错误状态应用于隐藏输入,则在输入被赋予有效值之后该状态仍然存在.只有在再次提交表单时才会正确验证输入.

由于jQuery.validate允许对隐藏输入进行验证,我想知道是否存在处理此问题的配置或方法.

编辑:

$form.validate({
    ignore: false,
    rules: {
        'firstname': 'required',
        'lastname': 'required',
        'org': 'required',
        'role': 'required',
        'email': {
            required: true,
            email: true
        }
    },
    messages: {
        'firstname': 'Please enter your first name',
        'lastname': 'Please enter your last name',
        'org': 'Please enter your organization',
        'role': 'Please select your role',
        'email': 'Please enter your email'
    },
    errorPlacement: function(error, element) {
        var $errMessage = $('.js-err-message');

        $errMessage.removeClass('js-hidden'); 

        $(error).each(function(){
            $errMessage.append(error);

            if (element.is('#role-input')) {
                $('.pseudo-select').addClass('mad-error');
            }
        });

    }
});

Answer 1

使用jQuery Validation插件,这些是触发特定元素验证的标准事件(最后一个有点不同)......

• 在盒子里打字
• 从列表中选择
• 单击复选框或单选按钮
• 失去输入元素的焦点
• 单击提交按钮(整个表单已验证)

由于隐藏元素更改值时不会触发任何内容,因此您需要使用该.valid()方法验证元素来自行触发它.

你没有向我们展示任何代码,更不用说改变隐藏元素值的代码,所以我只能给你一些通用的东西.您可以将.valid()代码放在用于更改值的任何函数中......

• 更改隐藏元素的值

• 调用.valid()验证隐藏的元素

  $(document).ready(function() {
  
      $('#myform').validate({  // initialize plugin
          // your options
      });
  
      $('#some_button').on('click', function() {
          // some imaginary button that changes the hidden value
          $('input[name="myHiddenElement"]').val('newvalue');  // <- change the hidden value
          $('input[name="myHiddenElement"]').valid();  // <- triggers validation on the hidden element
      });
  
  });
  

您可能需要使用其他插件选项,如该errorPlacement选项正确放置错误信息label的布局中,否则会隐藏元素后漂浮在某处.