确定表单验证以验证多个输入的值

时间:2012-04-12 19:53:12

标签: javascript jquery forms validation formwizard

我正在使用jQuery表单向导插件。我有20个问题,每个问题都有三个答案。每个答案都有一个重量。对于每个问题,答案的总重量必须等于10.

<fieldset id="first" class="step">
    <input type="text" size="2" maxlength="2" value="" name="question1[]" class="required"/>A: Inspiring others with a compelling vision for change.<br />
    <input type="text" size="2" maxlength="2" value="" name="question1[]" />B: Engaging others to buy-into the change.<br />
    <input type="text" size="2" maxlength="2" value="" name="question1[]" />C: Executing a project plan and managing accountabilities.<br />
    <label for="question1[]" class="error" style="display:none;">Your values must add up to 10!</label>
</fieldset>

这基本上是一种人格评估。假设我觉得A和C不适用,我输入10代表A。

有没有办法检查每个字段集是否添加最多10个,如果没有发送错误消息?

我正在使用jQuery验证插件,但这似乎有点过于具体,因为我知道它会检查数字等。

我试图在下面添加一些内容甚至可以通过所需的检查,但我不确定从哪里开始:

$(document).ready(function() {
    $("#Form").validate({
        submitHandler: function(form) {
            form.submit();
        }
    });
    $("#Form input[name='question1']").each(function() {
        $(this).rules("add", {
            required: true,
            maxlength: 2,
            messages: {
                required: "Required",
                minlength: jQuery.format("Max length of {2} characters.")
            }
        });
    });
});

我还发现jQuery validate必须编辑一个函数来容纳数组。我改变了以下功能:

checkForm: function() {
    this.prepareForm();
    for (var i=0, elements=(this.currentElements = this.elements()); elements[i]; i++ ) {
        if (this.findByName(elements[i].name).length != undefined &&
            this.findByName( elements[i].name ).length > 1) {

            for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
                this.check( this.findByName( elements[i].name )[cnt] );
            }
        }
        else {
            this.check( elements[i] );
        }
    }
    return this.valid();
}

我也试过这个:

$(document).ready(function(){
    $("#Form").validate({
        rules: {
            question1: {
                required: true
            }
        },
        submitHandler: function(form) {
            form.submit();
        }
    });
});

这些似乎都没有给我一个“必需”的错误。控制台中没有错误。我需要在按下“下一步”按钮时对每个问题进行验证。下一个按钮确实有type=submit,所以理论上至少应该看到我说问题1必须是必需的,但无济于事。

我也试过这个:

$().ready(function() {
    // validate the comment form when it is submitted
    $("#Form").validate({
        rules: {
            "question1[]": "required"
        },
        messages: {
            "question1[]": "Input is required",
        }
    });
});

但它继续下一个没有错误的字段集。

1 个答案:

答案 0 :(得分:1)

在这种情况下,创建一个已禁用的新输入,当各个权重值发生变化时,将此禁用输入的值更改为总和。验证禁用的输入 - 要求它的值等于10,如果不是,则显示错误。