Question

我正在设置一些没有插件的jQuery表单验证。我希望的行为是从禁用提交按钮开始，然后验证密钥上的每个输入，然后在所有字段有效后启用提交按钮。有4个文本输入和一个选择框。我想验证每个输入都不为空，在选择框中选择了某些内容，并且电子邮件字段包含有效的电子邮件地址。

我目前主要使用它，但我认为与我的setTimeout功能有关的验证有一些奇怪之处。输入将在输入时在有效和无效之间来回切换，有时验证会过早发生。

＆＃13;

// Form validation
var errors = 0;
$('#contact-form input[name!="submit"], select').on('keyup change', function() {
  var input = $(this);
  var name = input.attr('name');
  var email = $('input#email');
  var email_test = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/i;
  var is_email = email_test.test(email.val());
  var not_empty = input.val();
  var empty_inputs = $('#contact-form input[type="text"], select').filter(function() {
    return this.value.length === 0;
  }).length;
  var validate = setTimeout(function() {
    if (name === 'email') {
      if (is_email) {
        input.next().hide();
        input.removeClass('error').addClass('valid');
      } else {
        input.next().show();
        input.removeClass('valid').addClass('error');
      }
    } else {
      if (not_empty) {
        input.removeClass('error').addClass('valid');
        input.next().hide();
      } else {
        input.removeClass('valid').addClass('error');
        input.next().show();
      }
    }
    errors = $('input.error').length;
    if (errors < 1 && empty_inputs === 0) {
      $('input[type="submit"]').prop('disabled',false);
    } else {
      $('input[type="submit"]').prop('disabled',true);
    }
    clearTimeout(validate);
  }, 1500);
});

＆＃13;

form > div {
  margin-top:20px;
}
form > div:first-child {
  margin-top:0;
}
input[type="submit"] {
  display:block;
  background:#000;
  color:#fff;
}
  input[type=submit]:disabled {
    background:#ccc;
    color:#fff;
  }
#contact-form input.error, #contact-form select.error {
  border:1px solid #a94442;
}
#contact-form input.valid, #contact-form select.valid {
  border:1px solid #3c763d;
}
#contact-form div.error {
  color:#a94442;
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="contact-form" action="" method="post" autocomplete="off">
	<div>
        <label for="name">Name *</label>
        <input type="text" name="name" />
        <div class="error name">Please enter your name.</div>
    </div>
	<div>
        <label for="city">City *</label>
        <input type="text" name="city" />
        <div class="city error">Please enter your city.</div>
    </div>
    <div>
        <label for="state">State *</label>
        <select class="state" name="state">
        	<option value="" disabled selected>Select your state</option>
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="CA">California</option>
			<option value="CO">Colorado</option>
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="DC">District Of Columbia</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="HI">Hawaii</option>
			<option value="ID">Idaho</option>
			<option value="IL">Illinois</option>
			<option value="IN">Indiana</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="ME">Maine</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NV">Nevada</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NM">New Mexico</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="ND">North Dakota</option>
			<option value="OH">Ohio</option>
			<option value="OK">Oklahoma</option>
			<option value="OR">Oregon</option>
			<option value="PA">Pennsylvania</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="SD">South Dakota</option>
			<option value="TN">Tennessee</option>
			<option value="TX">Texas</option>
			<option value="UT">Utah</option>
			<option value="VT">Vermont</option>
			<option value="VA">Virginia</option>
			<option value="WA">Washington</option>
			<option value="WV">West Virginia</option>
			<option value="WI">Wisconsin</option>
			<option value="WY">Wyoming</option>
		</select>
        <div class="state error">Please select your state.</div>
    </div>
    <div>
	    <label for="question">Question *</label>
	    <input type="text" id="qustion" name="question" />
	    <div class="question error">Please enter your question.</div>
	</div>
    <div>
        <label for="email">Email *</label>
        <input id="email" type="text" name="email" />
        <div class="email error">Please enter a valid email address.</div>
    </div>
    <div>
        <label for="submit">&nbsp;</label>
        <input type="submit" name="submit" value="ENTER" disabled />
    </div>
</form>

＆＃13;

Answer 1

试试这个，

if(validate) 
    clearTimeout(validate);
validate = setTimeout(function(){
    // Your validation code
}, 1500);

每次此函数调用都将清除之前的函数调用，即等待完成超时。

关键字表格验证有延迟

1 个答案: