使用 Jquery Validation 插件进行行验证

Question

我有一系列对应likert问题的表格：

<form class="indicator-form" request="post">
    <fieldset>
        <label class="top-label">
            Enter the number of <strong>category 1</strong> staff that answered each level of importance on a 5-point likert-field scale for the question:<br/>
            <em>Question 1?</em>
        </label>
        <table>
            <tr class="likert">
                <td>
                    <label for="cat1_a">Very Unimportant</label>
                    <input id="cat1_a" name="cat1_a" class="likert-field" type="text" />
                </td>
                <td>
                    <label for="cat1_b">Unimportant</label>
                    <input id="cat1_b" name="cat1_b" class="likert-field" type="text" />
                </td>
                <td>
                    <label for="cat1_c">Neutral</label>
                    <input id="cat1_c" name="cat1_c" class="likert-field" type="text" />
                </td>
                <td>
                    <label for="cat1_d">Important</label>
                    <input id="cat1_d" name="cat1_d" class="likert-field" type="text" />
                </td>
                <td>
                    <label for="cat1_e">Very Important</label>
                    <input id="cat1_e" name="cat1_e" class="likert-field" type="text" />
                </td>
            </tr>
        </table>
    </fieldset>

    <fieldset>
        <label class="top-label">
            Enter the number of <strong>category 2</strong> staff that answered each level of importance on a 5-point likert-field scale for the question:<br/>
            <em>Question 2?</em>
        </label>
        <table>
            <tr class="likert">
                <td>
                    <label for="cat2_a">Very Unimportant</label>
                    <input id="cat2_a" name="cat2_a" class="likert-field" type="text" />
                </td>
                <td>
                    <label for="cat2_b">Unimportant</label>
                    <input id="cat2_b" name="cat2_b" class="likert-field" type="text" />
                </td>
                <td>
                    <label for="cat2_c">Neutral</label>
                    <input id="cat2_c" name="cat2_c" class="likert-field" type="text" />
                </td>
                <td>
                    <label for="cat2_d">Important</label>
                    <input id="cat2_d" name="cat2_d" class="likert-field" type="text" />
                </td>
                <td>
                    <label for="cat2_e">Very Important</label>
                    <input id="cat2_e" name="cat2_e" class="likert-field" type="text" />
                </td>
            </tr>
        </table>
    </fieldset>
    <input type="submit" value="Submit Data"/>
</form>

我想验证每个表格行，以便：

• 如果行中没有数据，则不应用验证（即用户 可以提交一个空行）
• 如果该行有任何个数据，则必须填写所有字段。

我的 JS：

// Likert Row Validation
jQuery.validator.addMethod('likert', function(value, element) {
    var $inputs = $(element).closest('tr.likert').find('.likert-field:filled');

    if (0 < $inputs.length && $inputs.length < 5 && !($(element).val())){
        return false;
    } else {
        return true;
    }

}, 'Partially completed rows are not allowed');


// Likert Fields
jQuery.validator.addClassRules('likert-field', {
    likert: true
});

var validator = $('.indicator-form').validate({
    errorPlacement: function(error, element){
        errorPos = element;
        errorClass = 'alert-arrow-center';
        error.insertAfter(errorPos).addClass(errorClass);
    }
});

从表面上看，此验证有效 - 但如果您开始使用它，很明显该规则仅适用于单击提交按钮时为空白的字段。

我怎样才能使验证规则适用于所有字段除非根本没有数据？

这里是 JSfiddle：http://jsfiddle.net/6RtcJ/1/

Answer 1

它的行为很奇怪，因为一次只为一个字段触发验证（除非您单击提交）。如果您将一个字段中的数据清空，则仅重新评估一个字段。这就是为什么您会在其他领域留下消息的原因。

这并不理想，但您可以强制整个表单在每个 keyup 和 blur 事件上使用 valid() 这样的方法重新验证...

$('input').on('blur keyup', function() {
    $('.indicator-form').valid();
});

您的演示：http://jsfiddle.net/6RtcJ/20/

同样的想法，但仅由blur 事件触发...

http://jsfiddle.net/6RtcJ/21/

引用OP：

"...很明显，该规则仅适用于单击提交按钮时为空白的字段。"

如果您希望验证消息即使在同一个字段通过验证后仍显示在字段上，那么这不是该插件的工作方式。

有一些方法可以使用the groups option 将消息组合在一起，这可能会对您有所帮助。您还可以使用errorPlacement 回调为整行定位一条消息。

groups 选项的工作方式是将多个字段的所有错误消息组合成一条消息...因此只有在组中的所有字段都通过验证后，单个消息才会消失。

在此示例中，我已将 onkeyup 选项设置为 false，因为现在所有字段都共享相同的消息。

groups 选项演示：http://jsfiddle.net/6RtcJ/22/

Answer 2

好的，我明白你的意思。 这里有一些解决方案。

1.当所有输入都不插入任何单词时，删除此表单上的规则。

2.添加规则，如果其中一个输入有数据。

您应该在验证前进行检查吗？

Answer 3

试试这个：

$(document).ready(function(){
        $('.indicator-form').validate({
            onfocusout:false,
            submitHandler: function (form) {
                alert('Form Submited');
                return false;
            }
        });

        // Likert Fields
        /*
        $('.likert-field').each(function(){
            $(this).rules('add',{
                            required: true,
                            messages: {
                                required: "Partially completed rows are not allowed",
                            },
            });
        });
        */

        $("input[type='submit']").click(function(){
            $("tr.likert").each(function(){
                var $inputs = $(this).find('.likert-field:filled');
                if (0 < $inputs.length && $inputs.length < 5) {
                    $(this).children('td').children('.likert-field').each(function() {
                        $(this).rules('add',{
                            required: true,
                        });
                    });
                } else {
                      $(this).children('td').children('.likert-field').each(function() {
                          $(this).rules('remove');
                      });
                }   
            });
        });
    });