我的网站上有一份表格。单击提交按钮时，将运行一个函数来获取每个字段的内容，根据 RegEx 和其他要求验证内容，然后如果一切正常，则通过 Ajax 将表单提交到 .php 邮件程序。
我希望表单在输入字段值更改时自动验证，或者当输入字段失去焦点时（我没有偏好，两者都很好），然后我希望表单仅在用户单击时提交表单上的“提交”按钮。 如果用户在所有字段都有效之前单击“提交”按钮，我不希望提交表单。
这是我的代码：
//contact form validation
$(function(){
$('.error').hide();
// hide error messages onchange
$("#contact-form").change(function(){
$('.error').hide();
$("label#name_error").hide();
$("label#invalid_error").hide();
$("label#email_error").hide();
$("label#invalid_phone_error").hide();
$("label#phone_error").hide();
$("label#zip_error").hide();
});
// validate fields on click
$(".cool-button").click(function(){
$('.error').hide();
$("label#name_error").hide();
$("label#invalid_error").hide();
$("label#email_error").hide();
$("label#invalid_phone_error").hide();
$("label#phone_error").hide();
$("label#zip_error").hide();
var name=$("input#contact_name").val();
var email=$("input#contact_email").val();
var emailRegEx =/^([a-zA-Z0-9])(([a-zA-Z0-9])*([\._-])?([a-zA-Z0-9]))*@(([a-zA-Z0-9\-])+(\.))+([a-zA-Z]{2,4})+$/
var phone=$("input#contact_phone").val();
var phone=phone.replace(/\s+-/g, "");
var phoneRegEx = /^(1-?)?\s?(\([2-9]\d{2}\)|\s?-?[2-9]\d{2})-?\s?[2-9]\d{2}-?\d{4}$/
var zip=$("input#contact_zip").val();
var best_time=$("input#contact_best_time").val();
var message=$("textarea#contact_message").val();
var timestamp=$("input#timestamp").val();
if(name==""){
$("label#name_error").show();
$("input#contact_name").focus();return false;
}
if(email==""){
$("label#email_error").show();
$("input#contact_email").focus();return false;
}
if (document.getElementById('contact_email').value.search(emailRegEx )==-1) {
$("label#invalid_error").show();
$("input#contact_email").focus();return false;
}
if(phone==""){
$("label#phone_error").show();
$("input#contact_phone").focus();return false;
}
if (document.getElementById('contact_phone').value.search(phoneRegEx )==-1) {
$("label#invalid_phone_error").show();
$("input#contact_phone").focus();return false;
}
if(zip==""){
$("label#zip_error").show();
$("input#contact_zip").focus();return false;
}
if(message==""){
$("label#message_error").show();
$("textarea#contact_message").focus();return false;
}
else {
var dataString='contact_name='+name+'&contact_email='+email+'&contact_phone='+phone+'&contact_zip='+zip+'&contact_best_time='+best_time+'×tamp='+timestamp+'&contact_message='+encodeURIComponent(message);
$.ajax({
type:"POST",
url:"php/contact.php",
data:dataString,
success:function(){$('#contact-form').html("<div id='message'></div>");$('#message').html("<h3>Message Sent</h3>").append("<p>Thank you for contacting us. We'll be in touch. <br /><br />If you have any further questions, you can always email us at [email protected] or call us at 800-924-9473</p>").hide().fadeIn(800,function(){$('#message').append("<img id='checkmark' src='images/submit2.png' />");});}});
}
return false;
});
});
这是表单的 HTML 和 PHP 代码
<form id="contact-form" method="post" action="#">
<p class="form-subscr-field">
<label for="contact_name" id="contact_name_label">Your name: *</label>
<input id="contact_name" type="text" name="contact_name" class="inputbox" size="10" required/>
<label class="error error-tip" for="contact_name" id="name_error" style="display: none; ">Please enter your name.</label>
</p>
<p class="form-subscr-field">
<label for="contact_email" id="contact_email_label">E-mail Address: *</label>
<input id="contact_email" type="email" name="contact_email" class="inputbox" size="10" required/>
<label class="error error-tip" for="contact_email" id="email_error" style="display: none; ">Please enter your email address.</label>
<label class="error error-tip" for="contact_email" id="invalid_error" style="display: none; ">Invalid email address.</label>
</p>
<fieldset class="w50">
<p class="form-subscr-field rowElem left">
<label for="contact_phone" id="contact_phone_label">Phone: *</label>
<input id="contact_phone" type="tel" name="contact_phone" class="inputbox" size="10" required minlength="9"/>
<label class="error error-tip" for="contact_phone" id="phone_error" style="display: none; ">Please enter your phone number.</label>
<label class="error error-tip" for="contact_phone" id="invalid_phone_error" style="display: none; ">Please enter a valid phone number.</label>
</p>
</fieldset>
<fieldset class="w50">
<p class="form-subscr-field rowElem right">
<label for="contact_zip" id="contact_zip_label">Zip Code: *</label>
<input id="contact_zip" type="text" name="contact_zip" class="inputbox" size="10" required minlength="5"/>
<label class="error error-tip" for="contact_zip" id="zip_error" style="display: none; ">Please enter your shipping zip code.</label>
</p>
</fieldset>
<p class="form-subscr-field">
<label for="contact_best_time" id="contact_best_time_label">Best time to Contact:</label>
<input id="contact_best_time" type="text" name="contact_best_time" class="inputbox" size="10" />
</p>
<p class="form-subscr-field">
<label for="contact_message" id="comment_label">Your message: *</label>
<textarea id="contact_message" name="contact_message" rows="8" cols="30" required minlength="2"></textarea>
<label class="error error-tip" for="contact_message" id="message_error" style="display: none; ">This field is required.</label>
</p>
<input type="hidden" id="timestamp" name="timestamp" value="<?php
$hourdiff = "2"; // hours diff btwn server and local time
$insertdate = date("l, d F Y h:i a",time() + ($hourdiff * 3600));
print ("$insertdate");
?>" />
<div class="submit-contact">
<p>
<input type="submit" name="submit" class="cool-button csbutton-color spot-action" id="contact_button" value="Submit" />
</p>
</div>
</form>
这通常通过
keyup注意：您永远不应该使用该功能修改当前编辑的文本字段，或执行任何其他会给用户带来烦恼的事情;)
编辑：我修改了代码，以在每次为所有输入字段抬起按键时进行验证。 我对 JQuery 不太熟悉，所以我用普通的 Javascript 来完成。如果需要的话，应该很容易转换。
$(function(){
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener("keyup", function(){validate()}, true);
}
$('.error').hide();
$(".cool-button").click(function(){validate()});
function validate() {
$('.error').hide();
$("label#name_error").hide();
$("label#invalid_error").hide();
$("label#email_error").hide();
$("label#invalid_phone_error").hide();
$("label#phone_error").hide();
$("label#zip_error").hide();
var name=$("input#contact_name").val();
var email=$("input#contact_email").val();
var emailRegEx =/^([a-zA-Z0-9])(([a-zA-Z0-9])*([\._-])?([a-zA-Z0-9]))*@(([a-zA-Z0-9\-])+(\.))+([a-zA-Z]{2,4})+$/
var phone=$("input#contact_phone").val();
var phone=phone.replace(/\s+-/g, "");
var phoneRegEx = /^(1-?)?\s?(\([2-9]\d{2}\)|\s?-?[2-9]\d{2})-?\s?[2-9]\d{2}-?\d{4}$/
var zip=$("input#contact_zip").val();
var best_time=$("input#contact_best_time").val();
var message=$("textarea#contact_message").val();
var timestamp=$("input#timestamp").val();
if(name==""){
$("label#name_error").show();$("input#contact_name").focus();return false;
}
if(email==""){
$("label#email_error").show();$("input#contact_email").focus();return false;
}
if (document.getElementById('contact_email').value.search(emailRegEx )==-1) {
$("label#invalid_error").show();$("input#contact_email").focus();return false;
}
if(phone==""){
$("label#phone_error").show();$("input#contact_phone").focus();return false;
}
if (document.getElementById('contact_phone').value.search(phoneRegEx )==-1) {
$("label#invalid_phone_error").show();$("input#contact_phone").focus();return false;
}
if(zip==""){
$("label#zip_error").show();$("input#contact_zip").focus();return false;
}
if(message==""){
$("label#message_error").show();$("textarea#contact_message").focus();return false;
}
else {
var dataString='contact_name='+name+'&contact_email='+email+'&contact_phone='+phone+'&contact_best_time='+best_time+'&contact_zip='+zip+'×tamp='+timestamp+'&contact_message='+encodeURIComponent(message);
$.ajax({
type:"POST",
url:"php/contact.php",
data:dataString,
success:function(){$('#contact-form').html("<div id='message'></div>");$('#message').html("<h3>Message Sent</h3>").append("<p>Thank you for contacting us. We'll be in touch. <br /><br />If you have any further questions, you can always email us at [email protected] or call us at 800-924-9473</p>").hide().fadeIn(800,function(){$('#message').append("<img id='checkmark' src='images/submit2.png' />");});}});
}
return false;
};
});
您应该使用某种验证器插件。就我个人而言，我使用过 jquery 工具表单验证器，它工作得很好。还有其他的。检查一下： http://flowplayer.org/tools/validator/
我还使用我构建的一个插件，它将采用表单并通过ajax提交它，并且有一些插件的工作原理与我的非常相似：
http://jquery.malsup.com/form/
就是一个例子。这允许您以普通 html 格式制作表单，并将表单提交到表单的操作 url，并且如果您没有使用 ajax 提交，它将以与浏览器相同的方式构建表单值。因此，无论您的后端脚本是什么，表单字段都会提交，就像您没有使用过 ajax 一样。
由于这对您来说工作量太大，让我向您展示一下使用和不使用它时您的代码是什么样子的。
没有（看看上面你的js）。
不要假设您的表单看起来像这样（简化）
<form method="POST" action="php/contact.php">
<label for="contact_name">Name</label>
<input name="contact_name" id="contact_name" />
<br />
<label for="contact_email">Email</label>
<input name="contact_email" id="contact_email" />
<br />
<label for="contact_phone">Phone</label>
<input name="contact_phone" id="contact_phone" />
<br />
<label for="contact_zip">Zip</label>
<input name="contact_zip" id="contact_zip" />
<br />
<label for="contact_best_time">Best time for Contact</label>
<input name="contact_best_time" id="contact_best_time" />
<br />
<label for="contact_message">Message:</label>
<input name="contact_message" id="contact_message" />
</form>
现在可能类似于现在的样子，没有所有额外的 html 进行格式化。
如果您同时使用验证器和 ajax 表单验证器，则几乎不需要进行任何更改。让我给他们展示一下。
有了验证器和ajax表单，你就会得到这个：
<form method="POST" action="php/contact.php" class="use-validator ajax-form">
<label for="contact_name">Name</label>
<input name="contact_name" id="contact_name" />
<br />
<label for="contact_email">Email</label>
<input name="contact_email" id="contact_email" type="email" required="required" />
<br />
<label for="contact_phone">Phone</label>
<input name="contact_phone" id="contact_phone" type="phone" />
<br />
<label for="contact_zip">Zip</label>
<input name="contact_zip" id="contact_zip" required="required" />
<br />
<label for="contact_best_time">Best time for Contact</label>
<input name="contact_best_time" id="contact_best_time" required="required" />
<br />
<label for="contact_message">Message:</label>
<textarea name="contact_message" id="contact_message" required="required"></textarea>
</form>
那么你的js将是：
$.tools.validator.fn("[type=phone]", "Invalid phone number", function(input, value) {
var phoneRegEx = /^(1-?)?\s?(\([2-9]\d{2}\)|\s?-?[2-9]\d{2})-?\s?[2-9]\d{2}-?\d{4}$/
return value.test(phoneRegEx);
});
$("form.use-validator").validator();
$("form.ajax-form").ajaxForm({
success:function(){$('#contact-form').html("<div id='message'></div>");$('#message').html("<h3>Message Sent</h3>").append("<p>Thank you for contacting us. We'll be in touch. <br /><br />If you have any further questions, you can always email us at [email protected] or call us at 800-924-9473</p>").hide().fadeIn(800,function(){$('#message').append("<img id='checkmark' src='images/submit2.png' />");});}});
});
您制作的任何自定义验证器都可以在其他表单上重复使用..
然后您可能需要一些自定义错误消息，但仅此而已..您可以删除所有其他 js 代码。
我倾向于分解每个输入的验证，这使得这件事变得更容易。您还可以使用 jQuery 插件，从长远来看，它可能会更加模块化。
也就是说，我会这样做（working jsFiddle）：
//contact form validation
$(function() {
$('.error').hide(); //hide all errors
function fieldHasValue(field, label) {
var value = field.val().trim(); //Grab value without leading or trailing whitespace
if (value.length > 0) {
label.hide();
} else {
label.show();
field.focus();
}
return (value.length > 0);
}
function nameIsValid() {
return fieldHasValue($("input#contact_name"), $("label#name_error"));
}
function emailIsValid() {
var email = $("input#contact_email").val().trim(); //Grab value without leading or trailing whitespace
var emailRegEx = /^([a-zA-Z0-9])(([a-zA-Z0-9])*([\._\-])?([a-zA-Z0-9]))*@(([a-zA-Z0-9\-])+(\.))+([a-zA-Z]{2,4})+$/;
var isValid = (email.length > 0) && email.match(emailRegEx);
if (isValid) {
$("label#email_error").hide();
$("label#invalid_error").hide();
} else if (email.length > 0) {
$("label#invalid_error").show();
$("input#contact_email").focus();
} else {
$("label#email_error").show();
$("input#contact_email").focus();
}
return isValid;
}
function phoneIsValid() {
var phone = $("input#contact_phone").val().replace(/\s+-/g, "").trim(); //Grab value without leading or trailing whitespace and replace [whitespace -] with an empty string.
var phoneRegEx = /^(1-?)?\s?(\([2-9]\d{2}\)|\s?-?[2-9]\d{2})-?\s?[2-9]\d{2}-?\d{4}$/;
var isValid = (phone.length > 0) && phone.match(phoneRegEx);
if (isValid) {
$("label#invalid_phone_error").hide();
$("label#phone_error").hide();
} else if (phone.length > 0) {
$("label#invalid_phone_error").show();
$("input#contact_phone").focus();
} else {
$("label#phone_error").show();
$("input#contact_phone").focus();
}
return isValid;
}
function zipIsValid() {
return fieldHasValue($("input#contact_zip"), $("label#zip_error"));
}
function messageIsValid() {
return fieldHasValue($("textarea#contact_message"), $("label#message_error"));
}
function bestTimeIsValid() {
return fieldHasValue($("input#contact_best_time"), $("label#best_time_error"));
}
function allInputsAreValid() {
var validName = nameIsValid();
var validEmail = emailIsValid();
var validPhone = phoneIsValid();
var validZIP = zipIsValid();
var validMessage = messageIsValid();
var validBestTime = bestTimeIsValid();
var isValid = validName && validEmail && validPhone && validZIP && validMessage && validBestTime;
return isValid;
}
$("input#contact_name").on('change blur', nameIsValid);
$("input#contact_email").on('change blur', emailIsValid);
$("input#contact_phone").on('change blur', phoneIsValid);
$("input#contact_zip").on('change blur', zipIsValid);
$("textarea#contact_message").on('change blur', messageIsValid);
$("input#contact_best_time").on('change blur', bestTimeIsValid);
$("input#contact_button").on('click', function (e) {
var timestamp = $("input#timestamp").val();
if (allInputsAreValid()) {
var dataString = 'contact_name=' + name + '&contact_email=' + email + '&contact_phone=' + phone + '&contact_zip=' + zip + '&contact_best_time=' + best_time + '×tamp=' + timestamp + '&contact_message=' + encodeURIComponent(message);
$.ajax({
type: "POST",
url: "php/contact.php",
data: dataString,
success: function() {
$('#contact-form').html("<div id='message'></div>");
$('#message').html("<h3>Message Sent</h3>").append("<p>Thank you for contacting us. We'll be in touch. <br /><br />If you have any further questions, you can always email us at [email protected] or call us at 800-924-9473</p>").hide().fadeIn(800, function() {
$('#message').append("<img id='checkmark' src='images/submit2.png' />");
});
}
});
}
e.preventDefault();
return false;
});
});