jQuery验证在第一次尝试时不起作用

时间:2016-06-17 08:57:09

标签: javascript jquery validation

我有一个问题,我的验证开始工作只有点击按钮,当我第一次输入数据,我没有错误信息,休息服务器不保存无效数据,在下一个输入数据,验证器写错误的。我的代码

$(document).ready(function() {
  $("#register-form").validate({

    rules: {
      login: {
        required: true,
        minlength: 3,
        maxlength: 15,
        regexp: '^[a-zA-Z0-9_-]+$'
      },
      password: {
        required: true,
        minlength: 3,
        maxlength: 15,
      },
      firstName: {
        required: true,
        minlength: 2,
        maxlength: 15,
      },
      lastName: {
        required: true,
        minlength: 2,
        maxlength: 15,
      },
      email: {
        required: true,
        email: true
      },
      birthDate: {
        required: true,
        regexp: '^((19|20)\\d\\d)-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$',
      }


    },

    messages: {
      login: {
        required: "This field cannot be null",
        minlength: "Login at least 3 symbols",
        maxlength: "Name maximum 15 symbols",
        regexp: 'Login can consist of letters, numbers, underscores(_),hyphens(-) !'
      },
      password: {
        required: "This field cannot be null",
        minlength: "Password at least 3 symbols",
        maxlength: "Password maximum 15 symbols",
      },
      firstName: {
        required: "This field cannot be null",
        minlength: "Name at least 2 symbols",
        maxlength: "Name maximum 15 symbols",
      },
      lastName: {
        required: "This field cannot be null",
        minlength: "Surname at least 2 symbols",
        maxlength: "Surname maximum 15 symbols",
      },
      email: "Please enter a valid email address",
      birthDate: {
        required: "This field cannot be null",
        regexp: "Please input date in format YYYY-MM-DD",
      }


    }

  });
  jQuery.validator.addMethod(
    'regexp',
    function(value, element, regexp) {
      var re = new RegExp(regexp);
      return this.optional(element) || re.test(value);
    },
    "Please check your input."
  );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>
<form action="" id="register-form">
  <div class="form-left-col">

    <label>Login:</label>
    <input type="text" id="login" name="login" value="" required />

    <label>Password:</label>
    <input type="text" id="password" name="password" value="" required/>

    <label>First Name:</label>
    <input type="text" id="firstName" name="firstName" value="" required/>

    <label>Last Name:</label>
    <input type="text" id="lastName" name="lastName" value="" required/>

    <label>Email:</label>
    <input type="text" id="email" name="email" value="" required/>


    <label>Birthday:</label>
    <input type="text" id="birthDate" name="birthDate" value="" required/>

    <label>Role:</label>
    <select id="role">
      <option selected="selected">USER</option>
      <option>ADMIN</option>
    </select>

    <button class="save">Save</button>

  </div>
</form>

0 个答案:

没有答案