基于Class的jQuery自定义验证

时间:2012-12-05 23:46:23

标签: jquery validation

我有这两种方法,它们有效,有点......

问题在于,在第一种情况下,只有具有该类名的第一个输入项才有效。

    $.validator.addClassRules("NameField",{
        required: true,
            minlength: 2,
        uniqueName: {
          product: function() {
              return $(this).val();
          }
        },
        messages: {
           required: "Required Field",
           minlength: "Minimum 2 characters",
           uniqueName: "Name exists already",
           remote: ''
        }
    });

第二个示例的问题是验证有效,但消息不适用于远程验证器

    $(".NameField").rules("add", {
        required: true,
            minlength: 2,
        uniqueName: {
          product: function() {
              return $(this).val();
          }
        },
        messages: {
           required: "Required Field",
           minlength: "Minimum 2 characters",
           uniqueName: "Name exists already",
           remote: ''
        }

    });

这是验证器的代码

    $.validator.addMethod("unique", function(value, element, params) {
      return $.validator.methods.remote.call(this, value, element, {
          url: 'mypage',
          data: {
              : value
          }
      });
    });

任何想法?

1 个答案:

答案 0 :(得分:4)

您无法像使用uniqueName一样内联添加验证方法。您必须首先定义将方法添加到验证器,然后您可以在规则中添加它。

<强> HTML

<form class="testForm" action="" method="post">
    <input type="text" name="input1" class="NameField" />
    <input type="text" name="input2" class="NameField" />
    <input type="text" name="input3" class="NameField" />
    <input type="text" name="input4" class="NameField" />
    <input type="submit" />
</form>​

<强>的Javascript

$.validator.addMethod("uniqueName", function(value, element) {
    var parentForm = $(element).closest('form');
    if ($(parentForm.find('.NameField[value=' + value + ']')).size() > 1) {
        return false;
    }
    else {
        return true;
    }
}, "Name exists already");

$.validator.addClassRules({
    NameField: {
        required: true,
        minlength: 2,
        uniqueName: true
    }
});

$(".testForm").validate();​

<强> Demo

另请注意,您无法在messages功能中添加addClassRules