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()代碼放在用於更改值的任何函數中...

• 更改隱藏元素的值

• 調用.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正確放置在布局中，否則它將隱藏在隱藏元素之后的某個位置。