使用 Jquery 验证时我无法提交表单。当我提交时,表单会再次重新加载,并且无法执行其他操作,例如发送邮件、生成警报等,这些操作在另一个 php 页面中给出
这是我的代码:
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="form" id="contactform">
<p class="requiredNote">
<em>*</em> Denotes a required field.
</p>
<div class="form-row">
<label for="name" class="three columns ">Name of Person: <em>*</em></label>
<input type="text" name="contactname" id="contactname" value="" class="required seven columns" role="input" aria-required="true" size="30"/>
</div>
<div class="form-row">
<label class="three columns ">Name of Company <em>*</em></label>
<input type="text" name="subject" id="subject" value="" class="required seven columns" role="input" aria-required="true" size="30"/>
</div>
<div class="form-row">
<label for="message" class="three columns ">Address<em>*</em></label>
<textarea rows="1" cols="" name="message" id="message" class="required seven columns " role="textbox" aria-required="true"></textarea>
</div>
<div class="form-row">
<label for="phno1" class="three columns " >Phone no <em>*</em></label>
<input type="tel" name="phno1" id="phno1" value="" class="required seven columns" role="textbox" aria-required="true" size=""/>
</div>
<div class="form-row">
<label for="phno2" class="three columns ">Mobile no <em>*</em></label>
<input type="tel" name="phno2" id="phno2" value="" class="required seven columns" role="input" aria-required="true" size="33"/>
</div>
<div class="form-row">
<label for="email" class="three columns ">Email: <em>*</em></label>
<input name="email" type="text" class="required email seven columns" id="email" value="" size="50" aria-required="true" role="input" />
</div>
<div class="form-row">
<label class="three columns " >Requirement Type:<em>*</em> </label>
<select class="required three columns" role="input" aria-required="true" name="reqsize" id="req">
<option value="">-------- select --------</option>
<option value="Commercial">Commercial</option>
<option value="Warehouse">Warehouse</option>
<option value="Land">Land</option>
<option value="BTS">BTS</option>
</select>
</div>
<div class="form-row">
<label for="prefloc" class="three columns " >Preferred Location:<em>*</em></label>
<select class="required three columns" role="input" aria-required="true" name="prefloc" id="prefloc">
<option value="">-------- select --------</option>
<option value="All" >All</option>
<option value="Alappuzha" >Alappuzha</option>
<option value="Alleppey" >Alleppey</option>
<option value="Aroor" >Aroor</option>
<option value="Mannar" >Mannar</option>
<option value="Cheranallur" >Cheranallur</option>
<option value="Ernakulam" >Ernakulam</option>
<option value="Aluva" >Aluva</option>
<option value="Angamaly" >Angamaly</option>
<option value="Chelavannor" >Chelavannor</option>
<option value="Chittoor" >Chittoor</option>
<option value="Chottanikkara" >Chottanikkara</option>
<option value="Collectorate Kochi" >Collectorate Kochi</option>
<option value="Eloor" >Eloor</option>
<option value="Ernakulam City" >Ernakulam City</option>
<option value="Banerji Road" >Banerji Road</option>
<option value="Ernakulam North" >Ernakulam North</option>
<option value="Ernakulam South" >Ernakulam South</option>
<option value="MG Road" >MG Road</option>
<option value="Rajaji Road" >Rajaji Road</option>
<option value="Kundanoor" >Kundanoor</option>
<option value="Kumaranasan road" >Kumaranasan road</option>
<option value="Kochi" >Kochi</option>
<option value="Edappally" >Edappally</option>
<option value="Kakkanad" >Kakkanad</option>
<option value="Kaloor" >Kaloor</option>
<option value="Elamakkara" >Elamakkara</option>
<option value="Vyttila" >Vyttila</option>
<option value="Vennala" >Vennala</option>
<option value="Vaduthala" >Vaduthala</option>
<option value="Vallarpadam" >Vallarpadam</option>
<option value="Chembumukku" >Chembumukku</option>
<option value="Gandhi Nagar" >Gandhi Nagar</option>
<option value="Irumpanam" >Irumpanam</option>
</select>
</div>
<div class="form-row">
<label for="prefcity" class="three columns " >Preferred City:<em>*</em></label>
<select class="required three columns" role="input" aria-required="true" name="prefcity" id="prefcity">
<option value="">-------- select --------</option>
<option value="Ernakulam">Ernakulam</option>
<option value="Kottayam ">Kottayam </option>
<option value="Kollam">Kollam</option>
<option value="Thrissur">Thrissur</option>
<option value="Thiruvananthapuram">Thiruvananthapuram</option>
</select>
</div>
<div class="form-row">
<label for="size" class="three columns " >Sqft details</label>
<input name="sqft" type="text" id="sqft" class="three columns"/>
</div>
<div class="form-row">
<label for="floor" class="three columns " >Preferred Floors: <em>*</em></label>
<select class="required three columns" role="input" aria-required="true" name="floor" id="preffloor">
<option value="">-------- select --------</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="form-row">
<label for="shell" class="three columns " >Shell Type:<em>*</em></label>
<select class="required three columns" role="input" aria-required="true" name="shell" id="shell">
<option value="">-------- select --------</option>
<option value="Bare">Bare</option>
<option value="Warm or Plug">Warm or Plug</option>
<option value="play">play</option>
</select>
</div>
<div class="form-row">
<label for="car" class="three columns " >Required car parks:<em>*</em></label>
<select name="car" class="three columns" id="car">
<option value="">-------- select --------</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
</div>
<div class="form-row">
<label for="" class="three columns ">Required power:<em>*</em> </label>
<select name="power" class="three columns" id="power">
<option value="">-------- select --------</option>
<option value="35 KVA">35 KVA</option>
<option value="45 KVA">45 KVA</option>
<option value="55 KVA">55 KVA</option>
<option value="65 KVA">65 KVA</option>
</select>
</div>
<div class="form-row">
<label for="" class="three columns ">Rental Range per sft:<em>*</em> </label>
<select name="sftrange" class="three columns" id="sftrange">
<option value="">-------- select --------</option>
<option value="1000 sft-1500 sft">1000 sft-1500 sft</option>
<option value="2000 sft-2500 sft">2000 sft-2500 sft</option>
<option value="3000 sft-3500 sft">3000 sft-3500 sft</option>
<option value="4000 sft-4500 sft">4000 sft-4500 sft</option>
</select>
</div>
<div class="form-row">
<label for="" class="three columns ">Expected Time frame to acquire the poperty:</label>
<input type="text" name="expt" id="" value="" size="" class="seven columns" />
</div>
<div class="form-row">
<label for="sugg" class="three columns ">Specifications, if any:</label>
<textarea name="sugg" cols="" rows="1" class="seven columns"></textarea>
</div>
<div class="form-row">
<label for=" " class="three columns">Captcha:<em>*</em></label>
<img src="php_captcha.php" border="0" />
<input name="captcha_value" type="text" id="captcha_value" placeholder="Enter Captcha"/>
</div>
<div style="position:relative" class="form-row" >
<p style="position:absolute;left:22%;top:4%">
<input type="image" value="Send Message" name="submitButton" id="submitButton" src="assets/img/submit_btn.png" title="Click here to submit your message!" />
</p>
<p> </p>
<p> </p>
</div>
</form>
验证1.js:
$(document).ready(function() {
var jVal = {
'contactname' : function() {
$('body').append('<div id="contactInfo" class="info"></div>');
var contactInfo = $('#contactInfo');
var ele = $('#contactname');
var pos = ele.offset();
contactInfo.css({
top : pos.top - 3,
left : pos.left + ele.width() + 15
});
if (ele.val().length < 6) {
jVal.errors = true;
contactInfo.removeClass('correct').addClass('error').html('← at least 6 characters').show();
ele.removeClass('normal').addClass('wrong');
} else {
contactInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'subject' : function() {
$('body').append('<div id="subjectInfo" class="info"></div>');
var subjectInfo = $('#subjectInfo');
var ele = $('#subject');
var pos = ele.offset();
subjectInfo.css({
top : pos.top - 3,
left : pos.left + ele.width() + 15
});
if (ele.val().length < 4) {
jVal.errors = true;
subjectInfo.removeClass('correct').addClass('error').html('← at least 4 characters').show();
ele.removeClass('normal').addClass('wrong');
} else {
subjectInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'message' : function() {
$('body').append('<div id="nameInfo" class="info"></div>');
var nameInfo = $('#nameInfo');
var ele = $('#message');
var pos = ele.offset();
nameInfo.css({
top : pos.top - 3,
left : pos.left + ele.width() + 15
});
if (ele.val().length < 25) {
jVal.errors = true;
nameInfo.removeClass('correct').addClass('error').html('← at least 25 characters').show();
ele.removeClass('normal').addClass('wrong');
} else {
nameInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'phno1' : function() {
$('body').append('<div id="phnInfo" class="info"></div>');
var phnInfo = $('#phnInfo');
var ele = $('#phno1');
var pos = ele.offset();
phnInfo.css({
top : pos.top - 3,
left : pos.left + ele.width() + 15
});
var patt = /^[0-9-+]+$/i;
if (!patt.test(ele.val())) {
jVal.errors = true;
phnInfo.removeClass('correct').addClass('error').html('← type phone no. in correct format').show();
ele.removeClass('normal').addClass('wrong');
}
if (ele.val().length < 10 || ele.val().length > 12) {
jVal.errors = true;
phnInfo.removeClass('correct').addClass('error').html('← type phone no. in correct format').show();
ele.removeClass('normal').addClass('wrong');
} else {
phnInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'phno2' : function() {
$('body').append('<div id="birthInfo" class="info"></div>');
var birthInfo = $('#birthInfo');
var ele = $('#phno2');
var pos = ele.offset();
birthInfo.css({
top : pos.top - 3,
left : pos.left + ele.width() + 15
});
var patt = /^[0-9-+]+$/i;
if (!patt.test(ele.val())) {
jVal.errors = true;
birthInfo.removeClass('correct').addClass('error').html('← type phone no. in correct format').show();
ele.removeClass('normal').addClass('wrong');
}
if (ele.val().length < 10 || ele.val().length > 12) {
jVal.errors = true;
birthInfo.removeClass('correct').addClass('error').html('← type phone no. in correct format').show();
ele.removeClass('normal').addClass('wrong');
} else {
birthInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'email' : function() {
$('body').append('<div id="emailInfo" class="info"></div>');
var emailInfo = $('#emailInfo');
var ele = $('#email');
var pos = ele.offset();
emailInfo.css({
top : pos.top - 3,
left : pos.left + ele.width() + 15
});
var patt = /^.+@.+[.].{2,}$/i;
if (!patt.test(ele.val())) {
jVal.errors = true;
emailInfo.removeClass('correct').addClass('error').html('← give me a valid email adress, ok?').show();
ele.removeClass('normal').addClass('wrong');
} else {
emailInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'req' : function() {
$('body').append('<div id="genderInfo" class="info"></div>');
var genderInfo = $('#genderInfo');
var ele = $('#req');
var pos = ele.offset();
genderInfo.css({
top : pos.top + 1,
left : pos.left + ele.width() + 25
});
if (ele.length == 0 || $(ele).val() == "") {
jVal.errors = true;
genderInfo.removeClass('correct').addClass('error').html('← please select your choice').show();
ele.removeClass('normal').addClass('wrong');
} else {
genderInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'prefloc' : function() {
$('body').append('<div id="preflocInfo" class="info"></div>');
var preflocInfo = $('#preflocInfo');
var ele = $('#prefloc');
var pos = ele.offset();
preflocInfo.css({
top : pos.top + 1,
left : pos.left + ele.width() + 25
});
//if($('select[name="prefloc"]:selected').length === 0)
if (ele.length == 0 || $(ele).val() == "") {
jVal.errors = true;
preflocInfo.removeClass('correct').addClass('error').html('← please select your choice').show();
ele.removeClass('normal').addClass('wrong');
} else {
preflocInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'prefcity' : function() {
$('body').append('<div id="prefcityInfo" class="info"></div>');
var prefcityInfo = $('#prefcityInfo');
var ele = $('#prefcity');
var pos = ele.offset();
prefcityInfo.css({
top : pos.top + 1,
left : pos.left + ele.width() + 25
});
//if($('select[name="prefcity"]:selected').length === 0)
if (ele.length == 0 || $(ele).val() == "") {
jVal.errors = true;
prefcityInfo.removeClass('correct').addClass('error').html('← please select your choice').show();
ele.removeClass('normal').addClass('wrong');
} else {
prefcityInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'preffloor' : function() {
$('body').append('<div id="preffloorInfo" class="info"></div>');
var preffloorInfo = $('#preffloorInfo');
var ele = $('#preffloor');
var pos = ele.offset();
preffloorInfo.css({
top : pos.top + 1,
left : pos.left + ele.width() + 25
});
//if($('select[name="preffloor"]:selected').length === 0)
if (ele.length == 0 || $(ele).val() == "") {
jVal.errors = true;
preffloorInfo.removeClass('correct').addClass('error').html('← please select your choice').show();
ele.removeClass('normal').addClass('wrong');
} else {
preffloorInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'shell' : function() {
$('body').append('<div id="shellInfo" class="info"></div>');
var shellInfo = $('#shellInfo');
var ele = $('#shell');
var pos = ele.offset();
shellInfo.css({
top : pos.top + 1,
left : pos.left + ele.width() + 25
});
//if($('select[name="shell"]:selected').length === 0)
if (ele.length == 0 || $(ele).val() == "") {
jVal.errors = true;
shellInfo.removeClass('correct').addClass('error').html('← please select your choice').show();
ele.removeClass('normal').addClass('wrong');
} else {
shellInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'car' : function() {
$('body').append('<div id="carInfo" class="info"></div>');
var carInfo = $('#carInfo');
var ele = $('#car');
var pos = ele.offset();
carInfo.css({
top : pos.top + 1,
left : pos.left + ele.width() + 25
});
//if($('select[name="car"]:selected').length === 0)
if (ele.length == 0 || $(ele).val() == "") {
jVal.errors = true;
carInfo.removeClass('correct').addClass('error').html('← please select your choice').show();
ele.removeClass('normal').addClass('wrong');
} else {
carInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'power' : function() {
$('body').append('<div id="powerInfo" class="info"></div>');
var powerInfo = $('#powerInfo');
var ele = $('#power');
var pos = ele.offset();
powerInfo.css({
top : pos.top + 1,
left : pos.left + ele.width() + 25
});
//if($('select[name="power"]:selected').length === 0)
if (ele.length == 0 || $(ele).val() == "") {
jVal.errors = true;
powerInfo.removeClass('correct').addClass('error').html('← please select your choice').show();
ele.removeClass('normal').addClass('wrong');
} else {
powerInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'sftrange' : function() {
$('body').append('<div id="sftrangeInfo" class="info"></div>');
var sftrangeInfo = $('#sftrangeInfo');
var ele = $('#sftrange');
var pos = ele.offset();
sftrangeInfo.css({
top : pos.top + 1,
left : pos.left + ele.width() + 25
});
//if($('select[name="sftrange"]:selected').length === 0)
if (ele.length == 0 || $(ele).val() == "") {
jVal.errors = true;
sftrangeInfo.removeClass('correct').addClass('error').html('← please select your choice').show();
ele.removeClass('normal').addClass('wrong');
} else {
sftrangeInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'captcha_value' : function() {
$('body').append('<div id="captchaInfo" class="info"></div>');
var captchaInfo = $('#captchaInfo');
var ele = $('#captcha_value');
var pos = ele.offset();
captchaInfo.css({
top : pos.top + 1,
left : pos.left + ele.width() + 15
});
if (ele.val().length < 6) {
jVal.errors = true;
captchaInfo.removeClass('correct').addClass('error').html('← Please enter given captcha').show();
ele.removeClass('normal').addClass('wrong');
} else {
captchaInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
/*'sendIt' : function() {
if (!jVal.errors) {
$('#contactform').submit();
}
}*/
};
// ====================================================== //
$('#submitButton').click(function() {
var obj = $.browser.webkit ? $('body') : $('html');
obj.animate({
scrollTop : $('#contactform').offset().top
}, 750, function() {
jVal.errors = false;
jVal.contactname();
jVal.subject();
jVal.message();
jVal.phno1();
jVal.phno2();
jVal.email();
jVal.req();
jVal.prefloc();
jVal.prefcity();
jVal.preffloor();
jVal.shell();
jVal.car();
jVal.power();
jVal.sftrange();
jVal.captcha_value();
jVal.sendIt();
});
return false;
});
$('#contactname').change(jVal.contactname);
$('#subject').change(jVal.subject);
$('#message').change(jVal.message);
$('#phno1').change(jVal.phno1);
$('#phno2').change(jVal.phno2);
$('#email').change(jVal.email);
$('input[name="req"]').change(jVal.req);
$('select[name="prefloc"]').change(jVal.prefloc);
$('select[name="prefcity"]').change(jVal.prefcity);
$('select[name="preffloor"]').change(jVal.preffloor);
$('select[name="shell"]').change(jVal.shell);
$('select[name="car"]').change(jVal.car);
$('select[name="power"]').change(jVal.power);
$('select[name="sftrange"]').change(jVal.sftrange);
$('#captcha_value').change(jVal.captcha_value);
});