jQuery.rules() 函数

Question

我还有一个关于 .rules() 函数的问题要添加到堆中。我知道它应该在使用 .validate() 之后出现，但无论如何我在控制台中收到 'cannot find settings' 类型错误。

我没有将它作为规则添加到 .validate() 的原因是因为我在一个页面上有多个表单，其中一些表单使用具有相同名称的输入（它们使用 AJAX，名称字段指向我的 DDB 列）。

代码如下。有什么想法吗？

<form id="userForm" class='validate form-horizontal'>
    <fieldset>
        <legend class="text-center">Not a member yet?</legend>

        <input type="hidden" name="User_ID" id="User_ID">
        <input type="hidden" name="PermissionLevel" id="PermissionLevel" value="1">

        <div class="form-group">
            <label for="RegisterUserName">Email Address:</label>
                <input type="text" name="UserName" id="RegisterUserName" class="required email form-control tooltip-toggle" title="This will be your username" data-placement="right">
        </div>

        <div class="form-group">
            <label for="RegisterUserPassword">Password:</label>
                <input type="password" name="UserPassword" id="RegisterUserPassword" class="required password form-control tooltip-toggle" title="Your password must be between 8-14 characters and can only contain numbers, letters, and the following symbols: @ * _ - . !" data-placement="right" rangelength="[8,14]">
        </div>

        <div class="form-group">
            <label for="RegisterUserPassword2">Confirm Password:</label>
                <input type="password" name="UserPassword2" id="RegisterUserPassword2" class="required password form-control" rangelength="[8,14]">
        </div>

        <div class="form-group">
            <div class="col-sm-12 text-center">
                <button type="button" class="btn btn-primary btn-register form-submit" data-form="registerUsername">Register</button>
            </div>
        </div>
    </fieldset>
</form>

$('form.validate').each(function() {
  $(this).validate({
    errorElement: 'span',
    errorClass: 'has-error help-block',
    errorPlacement: function(error, element) {
      if ($(element).hasClass('chosen-select') || $(element).hasClass('chosen-select-multiple')) {
      error.appendTo(element.next('.chosen-container'));
      } else {
        element.after(error);
      }
    },
    highlight: function (element, errorClass, validClass) {
      if ($(element).hasClass('chosen-select') || $(element).hasClass('chosen-select-multiple')) {
        $(element).next('.chosen-container').find('a').addClass(errorClass).removeClass(validClass);
      }
      $(element).closest('.form-group').addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function (element, errorClass, validClass) {
      if ($(element).hasClass('chosen-select') || $(element).hasClass('chosen-select-multiple')) {
        $(element).next('.chosen-container').find('a').removeClass(errorClass).addClass(validClass);
      }
      $(element).closest('.form-group').addClass(validClass).removeClass(errorClass);
    },
    ignore: ':hidden:not(.chosen-select):not(.chosen-select-multiple)'
  });

  $.validator.addMethod('USAdate', function(value, element, param) {
    var isValidDate = /^((((0[13578])|([13578])|(1[02]))[\/](([1-9])|([0-2][0-9])|(3[01])))|(((0[469])|([469])|(11))[\/](([1-9])|([0-2][0-9])|(30)))|((2|02)[\/](([1-9])|([0-2][0-9]))))[\/]\d{4}$|^\d{4}$/.test(value);
    return this.optional(element) || isValidDate;
  }, 'Please enter a valid date.');

  $.validator.addMethod('phone', function(value, element, param) {
    var isValidPhone = /^[2-9]\d{2}-\d{3}-\d{4}$/.test(value);
    return this.optional(element) || isValidPhone;
  }, 'Please enter a valid phone number.');

  $.validator.addMethod('password', function(value, element, param) {
    var isValidPassword = /^[A-Za-z0-9\d=!\-@._*]+$/.test(value);
    return this.optional(element) || isValidPassword;
  }, 'Must be between 8-14 characters, only numbers, letters, and the following symbols: @ * _ - . !');

  $.validator.addMethod('nnInteger', function(value, element, param) {
    var isNNInteger = /^\d+$/.test(value);
    return this.optional(element) || isNNInteger;
  }, 'Please enter a non-negative number.');

  $('#RegisterUserPassword2').rules('add', {
    equalTo: '#RegisterUserPassword',
    messages: {
      equalTo: 'Passwords must match.'
    }
  });
});

$('.form-submit').on('click', function() {
  var form = $(this).closest('form');

  switch ($(this).data('form')) {
    case 'registerUsername':
    var loginModal = $('#login');
    var registerModal = $('#register');

    if (form.validate().form()) {
      $.ajax({
        type: 'POST',
        url: 'includes/ajax/ajax-registerUsername.php',
        data: form.serialize(),
        dataType: 'json',
        success: function(data) {
          if (data.result === 'error') {
            loginModal.find('.modal-header').addClass('error');
            loginModal.find('.modal-footer').addClass('error').html('Error: An error occured while submitting your username<br>' + data.message);
            return false;
          } else {
            console.log(data);
            clientRegistration = data.user;
            loginModal.modal('hide');
            var registerCarousel = registerModal.find('#registerCarousel');
            registerModal.modal({backdrop: 'static', keyboard: false}, 'show');
          }
        }
      });
    }
    break;
  }
});

编辑：只需注释掉 .rules() 调用即可删除 Uncaught TypeError: Cannot read property 'settings' of undefined 错误。

编辑 2：按照建议包装表单验证，添加了一个表单提交示例。

Answer 1

您的代码...

$('form.validate').validate({
    onsubmit: true, 
    ....

Check the docs regarding onsubmit: true - "A boolean true is not a valid value." 也就是说，你只能将onsubmit设置为false或者一个函数。如果您想要默认功能，只需将其完全省略即可。

通过设置它 true，您可能会破坏插件。

要在单击按钮时立即进行验证，您的 button 元素上必须有一个 type="submit"。（或包含以编程方式触发验证的代码的 click 处理程序。）

演示：http://jsfiddle.net/rma3s6n0/

编辑:

...because I have side-by-side forms that use the same name...

Uncaught TypeError: Cannot read property 'settings' of undefined error.

显然，您正试图通过定位 class...

将 .validate() 方法附加到多个 form

$('form.validate').validate({ ...

如果是这样，那么您必须使用 jQuery .each() 将方法附加到多个表单元素，从而分别初始化每个表单。 This is a documented limitation of the plugin.

$('form.validate').each(function() {
    $(this).validate({ ....

编辑 2:

对 OP 进行了编辑，代码中不再出现上述问题。

我看到你再次编辑了问题。您的 ajax 表单提交代码应包含在 submitHandler 回调函数中。

参见：http://jqueryvalidation.org/validate/#submithandler

"The right place to submit a form via Ajax after it is validated"

编辑 3:

As of the time of this edit, the OP's code is working: http://jsfiddle.net/r0fd80hb/

Answer 2

找到解决方案。如果您运行 a $.each() 一次验证多个表单，特别是如果给定页面上存在多个表单，则您不能使用 .rules() 添加规则超过一次。

$('form.validate').each(function() {
  //.validate() stuff here
  switch ($(this).attr('id')) {
    case 'userForm':
      $('#RegisterUserPassword2').rules('add', {
        equalTo: '#RegisterUserPassword',
        messages: {
          equalTo: 'Passwords must match.'
        }
      });
      break;
    case 'passForm':
      $('#NewPassword2').rules('add', {
        equalTo: '#NewPassword',
        messages: {
          equalTo: 'Passwords must match.'
        }
      });
      break;
  }
});

类似的东西可以用来为输入所属的给定表单添加规则。不是最好的编程方法，但它有效。

jQuery.rules() 函数

jQuery .rules() function

javascript

jquery

jquery-validate