在表单中验证 jQuery-UI Spinner答案

【问题标题】：Validate a jQuery-UI Spinner within a form在表单中验证 jQuery-UI Spinner
【发布时间】：2015-03-12 11:44:09
【问题描述】：

我正在使用“jQuery 验证插件”来验证表单字段。效果很好。

我在表单中添加了一个新字段。此字段使用 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()) {
    ...
}

但它不起作用。我也尝试定义自定义验证方法，但没有成功。

【问题讨论】：

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

【解决方案1】：

您只能在.validate() 方法中使用输入元素的name，而不是id。

您的name 定义为value...

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

所以你必须在.validate() 方法中使用value...

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

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

演示：http://jsfiddle.net/6u18p6ju/

【讨论】：