Question

我目前有一个动态变化的表单。我正在使用所有文本输入，但它们都应该只接受数字。

    $("#result-form").validate({
            rules: {
                .text: {
                required: true,
                digits: true
                }
            },
            messages: {
                .text:{
                required: " Please enter a score!",
                digits: " Please only enter numbers!"
                }
            },
            submitHandler: function(form) {
                form.submit();
            }
        });

目前我尝试使用上述方法进行验证，但这不起作用。有什么想法吗？

Answer 1

你不能这样做......

$("#result-form").validate({
    rules: {
        .text: {  // <-- MUST only be a NAME attribute
            required: true,
            digits: true
        }
    },
    ....

使用.validate()方法声明规则时，您只能使用name属性声明规则。

如果您要动态创建表单元素，则只能使用the .rules('add') method更改或应用规则。您可以在创建新元素后立即调用，并且可以使用您希望的任何jQuery选择器来定位它们。

此代码会将这些规则动态应用于页面上的所有type="text"字段。

$("#result-form").validate({ // initialize plugin // other rules and options }); $('input[type="text"]').each(function() { $(this).rules('add', { required: true, digits: true, messages: { required: " Please enter a score!", digits: " Please only enter numbers!" } }); });

工作演示：http://jsfiddle.net/2U68C/

备注：

如果/只要选择器可能包含多个元素，必须将.rules()包装在jQuery .each中。如果您没有这样做，则只会验证第一个匹配的元素。

您必须确保考虑进行验证的所有表单输入元素都包含唯一 name属性。这是插件跟踪输入的方式。如果您不这样做，将只验证第一个匹配的元素。

<强>旁注：

根本不需要这个......

submitHandler: function(form) { form.submit(); }

这已经是默认行为了。实际上，form.submit()与插件中的代码相同。换句话说，在这种情况下，您无需调用submitHandler。只有当您需要覆盖或增加时，您才需要使用它，例如使用ajax()。

Answer 2

仅是补充@Spark的答案，如果您添加

$('input[type="text"]').on('keyup', function(e) {
    $(e.target).valid();
});

您可以动态验证（在第一次时，只有在您单击或关注其他元素后，输入才有效）

Answer 3

使用name代替class。

rules: {
   nameoftextbox: {
        required: true,
        digits: true
    }
}

与课程一起使用：

jQuery.validator.addClassRules("classname", {
  required: true,
  digits: true
});

Answer 4

您可以在输入标签中添加“必需数字”属性，并执行以下操作：

var validator = $( "#result-form" ).validate();
validator.form();

这也允许您具体选择所需的文本框。如需进一步阅读，建议您阅读http://jqueryvalidation.org/documentation/

对输入类型进行Jquery表单验证

4 个答案: