输入类型的jQuery表单验证

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属性声明它们。

---

如果要动态创建表单元素，则只能使用.rules('add')方法来更改或应用规则。 创建新元素后，您将立即调用此方法，并且可以使用所需的任何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/