验证表单中的jQuery-UI Spinner

时间:2015-03-12 11:44:10

标签: javascript jquery jquery-ui jquery-validate jquery-ui-spinner

我正在使用" jQuery Validation Plugin"验证表单字段。 它运作得很好。

我在表单中添加了一个新字段。该字段使用jQuery-UI Spinner,但我没有成功验证它。

这是spinner元素的HTML代码:

<form id="formAddCategory">
    <input id="spinTeamNumber" name="value" style="display: inline-block; margin: 10px; width: 3em;" size="3" maxlength="3">
</form>

这是微调代码:

$("#spinTeamNumber").spinner({
    step : 1,
    min : 1,
    numberFormat : "n",
    alignment : 'vertical'
});

这是验证码:

$("#formAddCategory").validate({
    rules : {
        "spinTeamNumber" : {
            required : true,
        }
    },
    messages : {
        "spinTeamNumber" : {
            required : "* Required"
        }
    }
});

[...]

if ($("#formAddCategory").valid()) {
    ...
}

但它不起作用。 我还试图定义一个自定义验证方法,但没有成功。

1 个答案:

答案 0 :(得分:1)

您只能使用name方法中输入元素的id .validate()

您的name定义为value ...

<input id="spinTeamNumber" name="value" ....

因此,您必须在value方法中使用.validate() ...

$("#formAddCategory").validate({
    rules : {
        value : {  // <-- the input NAME
            required : true,
        }
    },
    messages : {
        value : {  // <-- the input NAME
            required : "* Required"
        }
    }
});

要创建微调器,jQuery UI会在原始输入元素周围动态添加容器,因此您可能希望使用errorPlacement选项将消息显示在外部。

DEMO:http://jsfiddle.net/6u18p6ju/