我的 jquery 验证和 php 表单都同时执行,这意味着验证错误正在显示,并且 php 操作也已执行。这是完整的代码。如果表单中有错误但即使认为表单正在执行,jquery 表单提交函数将返回 false ..
<form class="form-3 form-horizontal ajxfrm " id="step-three" enctype="multipart/form-data" action="<?php echo $html->addLink(array('controller'=>'homes','action'=>'step_three')); ?>" method="post" target="_parent">
<div id="calendar">
<div class="clear"></div>
<div class="control-group">
<div class="control-label">Name<span>*</span></div>
<div class="controls"><input type="text" name="name" id="name" />
<span id="nameInfo"></span></div>
</div>
<div class="control-group">
<div class="control-label">Email<span>*</span></div>
<div class="controls"><input type="text" name="email" id="email" />
<span id="emailInfo"></span></div>
</div>
<div class="control-group">
<div class="control-label">Contact<span>*</span></div>
<div class="controls"><input type="text" name="contact" id="contact" />
<span id="contactInfo"></span></div>
</div>
<div class="control-group">
<div class="control-label">Skype Id<span>*</span></div>
<div class="controls"><input type="text" name="skypeid" id="skype" />
<span id="skypeInfo"></span></div>
</div>
<div style="position:relative">
<div class="control-group">
<div class="control-label">Files<br/><span style="font-size:10px; font-style:italic">(Optional)</span></div>
<div class="controls">
<input id="fileupload" type="file" name="fileupload[]" multiple/>
<span id="fileInfo"></span><br/>
</div>
</div>
</div>
<div class="control-group">
<div class="control-label">Your Message<span>*</span></div>
<div class="controls"><textarea rows="3" name="message" id="message"></textarea>
<span id="messageInfo"></span></div>
</div>
<div class="clear"></div>
</div>
<div id="submit" style=" text-align:right;">
<input type="hidden" name="post" value="1"/>
<input type="submit" class="btn green" value="Next" id="step3submit" style="margin-right:-20%; margin-top:5%"/>
</div>
</form>
这是jquery文件
$(document).ready(function () {
//global vars
var form = $("#step-three");
var name = $("#name");
var nameInfo = $("#nameInfo");
var email = $("#email");
var emailInfo = $("#emailInfo");
var contact = $("#contact");
var contactInfo = $("#contactInfo");
var skype = $("#skype");
var skypeInfo = $("#skypeInfo");
var message = $("#message");
//On blur
name.blur(validateName);
email.blur(validateEmail);
contact.blur(validateContact);
skype.blur(validateSkype);
message.blur(validateMessage);
//On key press
name.keyup(validateName);
email.keyup(validateEmail);
contact.keyup(validateContact);
skype.keyup(validateSkype);
message.keyup(validateMessage);
//On Submitting
form.submit(function () {
if (validateName() & validateEmail() & validateContact() & validateSkype() & validateMessage())
return true;
else
return false;
});
//validation functions
function validateEmail() {
//testing regular expression
var a = $("#email").val();
var filter = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
//if it's valid email
if (email.val().length == 0) {
email.addClass("error");
emailInfo.text("Required");
emailInfo.addClass("error");
return false;
} else if (filter.test(a)) {
email.removeClass("error");
emailInfo.text("");
emailInfo.removeClass("error");
return true;
}
//if it's NOT valid
else if (!filter.test(a)) {
email.addClass("error");
emailInfo.text("Valid Email Please");
emailInfo.addClass("error");
return false;
}
}
function validateName() {
//if it's NOT valid
if (name.val().length == 0) {
name.addClass("error");
nameInfo.text("Required");
nameInfo.addClass("error");
return false;
}
//if it's valid
else {
name.removeClass("error");
nameInfo.text("");
nameInfo.removeClass("error");
return true;
}
}
function validateContact() {
//if it's NOT valid
if (contact.val().length == 0) {
contact.addClass("error");
contactInfo.text("Required");
contactInfo.addClass("error");
return false;
}
//if it's valid
else {
contact.removeClass("error");
contactInfo.text("");
contactInfo.removeClass("error");
return true;
}
}
function validateSkype() {
//if it's NOT valid
if (skype.val().length == 0) {
skype.addClass("error");
skypeInfo.text("Required");
skypeInfo.addClass("error");
return false;
}
//if it's valid
else {
skype.removeClass("error");
skypeInfo.text("");
skypeInfo.removeClass("error");
return true;
}
}
/* function validatePass1(){
var a = $("#password1");
var b = $("#password2");
//it's NOT valid
if(pass1.val().length <5){
pass1.addClass("error");
pass1Info.text("Ey! Remember: At least 5 characters: letters, numbers and '_'");
pass1Info.addClass("error");
return false;
}
//it's valid
else{
pass1.removeClass("error");
pass1Info.text("At least 5 characters: letters, numbers and '_'");
pass1Info.removeClass("error");
validatePass2();
return true;
}
}
function validatePass2(){
var a = $("#password1");
var b = $("#password2");
//are NOT valid
if( pass1.val() != pass2.val() ){
pass2.addClass("error");
pass2Info.text("Passwords doesn't match!");
pass2Info.addClass("error");
return false;
}
//are valid
else{
pass2.removeClass("error");
pass2Info.text("Confirm password");
pass2Info.removeClass("error");
return true;
}
}*/
function validateMessage() {
//it's NOT valid
if (message.val().length < 10) {
message.addClass("error");
messageInfo.text("More than 10 Characters required");
messageInfo.addClass("error");
return false;
}
if (message.val().length == 0) {
message.addClass("error");
messageInfo.text("Required");
messageInfo.addClass("error");
return false;
}
//it's valid
else {
message.removeClass("error");
messageInfo.text("");
messageInfo.removeClass("error");
return true;
}
}
});