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);
    }
});

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

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

JS在这里：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');
                      });
                }   
            });
        });
    });

使用Jquery Validation插件进行行验证

3 个答案: