jQuery.validate 和隐藏输入

jQuery.validate and hidden input

本文关键字:输入 隐藏 validate jQuery      更新时间:2023-09-26

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

我的问题是更改隐藏输入的值不会触发更改、键控或模糊事件。如果错误状态应用于隐藏输入,则在输入给定有效值后,该状态将保持不变。只有当再次提交表单时,输入才会正确验证。

由于 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');
            }
        });
    }
});

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

  • 在框中键入内容
  • 从列表中选择
  • 单击复选框或单选按钮
  • 失去输入元素的焦点
  • 单击"提交"按钮(验证整个表单(

由于当隐藏元素更改值时不会触发这些内容,因此您需要使用 .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正确放置在布局中,否则它将浮动在隐藏元素之后的某个位置。