Javascript 使用Jquery验证插件进行行验证

我有一系列与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);
    }
});

从表面上看，这种验证是有效的——但如果您开始使用它，那么很明显，当单击“提交”按钮时，该规则仅应用于空白字段

如何使验证规则适用于所有字段，除非根本没有数据

jshiddle这里：

好的，我明白你的意思了。 这里有一些解决办法

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

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

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

尝试以下方法：

$(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');
                      });
                }   
            });
        });
    });

---

它的行为很奇怪，因为一次只能对一个字段触发验证，除非您单击“提交”。如果在一个字段中空白数据，则仅重新计算该字段。这就是为什么在其他字段上会出现消息

这并不理想，但您可以使用以下有效方法强制整个表单在每个关键点和模糊事件上重新验证

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

您的演示：

同样的想法，但只是由模糊事件触发

报价OP:

。。。很明显，当单击“提交”按钮时，该规则仅应用于空白字段

如果您希望验证消息即使在同一字段通过验证后也会出现在该字段上，那么这不是该插件的工作方式

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

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

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

---

分组选项演示：

尝试将验证添加到填写的字段，而不是缺少的字段？我希望规则适用于所有字段，但消息仅在字段为空时显示。缺少1个条件-如果在前两个字段中输入，然后单击提交-它将按预期工作。现在从字段2中删除该值。没有出现验证错误，应该有一个。当然，如果你删除了第一个，那么所有的验证错误都应该被删除。你能给出一个具体的测试用例吗？这不允许用户提交一个空行。见执行部分。