jQuery.validate和隐藏输入

Question

jQuery.validate和隐藏输入

4

我有一个表单，其中包含一个伪选择元素。伪选择元素是下拉菜单。当单击下拉菜单中的某个项目时，隐藏输入框将被赋予那个项目分配的值。我正在使用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');
            }
        });

    }
});

- maxhallinan

1

最好在问题中发布所有相关代码。 - A. Wolff

抱歉，我认为代码并不是严格相关的。我的问题是关于jQuery.validate的能力，而不是关于我的代码问题。 - maxhallinan

相关的代码应包括重现问题所需的任何代码。在您的情况下，这可以节省人们创建答案演示时的时间。如果未来读者遇到类似的问题，它也有助于更好地理解问题/解决方案。谢谢。 - Sparky

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sparky · Accepted Answer

使用jQuery验证插件，以下是触发特定元素验证的标准事件（最后一个有点不同）...

- 在框中输入 - 从列表中选择 - 单击复选框或单选按钮 - 失去输入元素的焦点 - 单击提交按钮（整个表单都会被验证）

由于当隐藏元素的值更改时，没有任何事情会触发它们，您需要使用 .valid()方法自行触发它。

您还没有向我们展示任何代码，更不用说更改隐藏元素值的代码了，因此我只能给您一些通用的东西。您可以在用于更改该值的任何函数中放置.valid()代码...

change the value of the hidden element

call .valid() to validate the hidden element

$(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，否则它将浮动在隐藏元素之后。