Question

我还有另一个问题，即添加.rules(）函数。我理解它应该在使用.validate()之后出现，但是我收到了一个“找不到设置”的设置。无论如何，在我的控制台中输入错误。

我不在.validate()内部添加它的原因是因为我在页面上有多个表单，其中一些使用具有相同名称的has输入（它们是用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，您可能会破坏插件。

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

DEMO：http://jsfiddle.net/rma3s6n0/

修改：

...因为我有使用相同名称的并排表格......

Uncaught TypeError: Cannot read property 'settings' of undefined错误。

显然，您正在尝试通过定位一个类来将.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


＆＃34;经过验证后通过Ajax提交表单的正确位置＆＃34;

编辑3 ：

As of the time of this edit，OP的代码正在运行：http://jsfiddle.net/r0fd80hb/

Answer 2

找到解决方案。如果您正在运行$.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（）函数

2 个答案: