我的代码有什么问题..
我希望在填写整个表单后点击提交然后jquery通知将显示，
问题是，如果字段未经过验证，它会显示javascript警告框，并提交带有空白值的表单，表单是否已完成......
当表单填写正确时，它会在电子邮件中发送空白值
请查看我的代码：
<html>
<head>
<title>Form Validation</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.notifyBar.js"></script>
<link rel="stylesheet" href="jquery.notifyBar.css" />
<script>
$(document).ready(function(){
$("#submit").click(function () {
$.post("formsubmit.php", $("#myForm").serialize(), function(response) {
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
var alphaExp = /^[a-zA-Z ]+$/;
if(myForm.Name.value.match(alphaExp)){
}else{
alert( "Name Should be in Alphabet!" );
myForm.Name.focus();
return false;
}
if( document.myForm.Country.value == "-1" )
{
alert( "Please provide your country!" );
return false;
}
if( document.myForm.EMail.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(myForm.EMail.value.match(emailExp)){
}else{
alert( "Email ID appears to be Invalid" );
myForm.EMail.focus();
return false;
}
if( document.myForm.Phone.value == "" ||
isNaN( document.myForm.Phone.value ) ||
document.myForm.Phone.value.length != 10 )
{
alert( "Please provide a 10 Digit Mobile No." );
document.myForm.Phone.focus() ;
return false;
}
if( document.myForm.quote.value == "-1" )
{
alert( "Please provide your Quote!" );
return false;
}
}
$.notifyBar({ cssClass: "success", html: "Mail sent Successfully!" });
return false;
return true;
});
});
});
</script>
</head>
<body>
<form action="" method="post" name="myForm" onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input name="Name" type="text" /></td>
</tr>
<tr>
<td align="right">Country </td>
<td>
<select name="Country" style="width:166px">
<option value="-1">Choose..</option>
<option>Afghanistan</option>
<option>Albania</option>
<option>Algeria</option>
<option>American Samoa</option>
<option>Andorra</option>
<option>Angola</option>
<option>Anguilla</option>
<option>Antarctica</option>
<option>Antigua and Barbuda</option>
<option>Argentina</option>
<option>Armenia</option>
<option>Aruba</option>
<option>Australia</option>
<option>Austria</option>
<option>Azerbaijan</option>
<option>Bahamas</option>
<option>Bahrain</option>
<option>Bangladesh</option>
<option>Barbados</option>
<option>Belarus</option>
<option>Belgium</option>
<option>Belize</option>
<option>Benin</option>
<option>Bermuda</option>
<option>Bhutan</option>
<option>Bolivia</option>
<option>Bosnia and Herzegovina</option>
<option>Botswana</option>
<option>Bouvet Island</option>
<option>Brazil</option>
<option>British Indian Ocean Territory</option>
<option>Brunei Darussalam</option>
<option>Bulgaria</option>
<option>Burkina Faso</option>
<option>Burundi</option>
<option>Cambodia</option>
<option>Cameroon</option>
<option>Canada</option>
<option>Cape Verde</option>
<option>Cayman Islands</option>
<option>Central African Republic</option>
<option>Chad</option>
<option>Chile</option>
<option>China</option>
<option>Christmas Island</option>
<option>Cocos Islands</option>
<option>Colombia</option>
<option>Comoros</option>
<option>Congo</option>
<option>Congo, Democratic Republic of the</option>
<option>Cook Islands</option>
<option>Costa Rica</option>
<option>Cote d'Ivoire</option>
<option>Croatia</option>
<option>Cuba</option>
<option>Cyprus</option>
<option>Czech Republic</option>
<option>Denmark</option>
<option>Djibouti</option>
<option>Dominica</option>
<option>Dominican Republic</option>
<option>Ecuador</option>
<option>Egypt</option>
<option>El Salvador</option>
<option>Equatorial Guinea</option>
<option>Eritrea</option>
<option>Estonia</option>
<option>Ethiopia</option>
<option>Falkland Islands</option>
<option>Faroe Islands</option>
<option>Fiji</option>
<option>Finland</option>
<option>France</option>
<option>French Guiana</option>
<option>French Polynesia</option>
<option>Gabon</option>
<option>Gambia</option>
<option>Georgia</option>
<option>Germany</option>
<option>Ghana</option>
<option>Gibraltar</option>
<option>Greece</option>
<option>Greenland</option>
<option>Grenada</option>
<option>Guadeloupe</option>
<option>Guam</option>
<option>Guatemala</option>
<option>Guinea</option>
<option>Guinea-Bissau</option>
<option>Guyana</option>
<option>Haiti</option>
<option>Heard Island and McDonald Islands</option>
<option>Honduras</option>
<option>Hong Kong</option>
<option>Hungary</option>
<option>Iceland</option>
<option>India</option>
<option>Indonesia</option>
<option>Iran</option>
<option>Iraq</option>
<option>Ireland</option>
<option>Israel</option>
<option>Italy</option>
<option>Jamaica</option>
<option>Japan</option>
<option>Jordan</option>
<option>Kazakhstan</option>
<option>Kenya</option>
<option>Kiribati</option>
<option>Kuwait</option>
<option>Kyrgyzstan</option>
<option>Laos</option>
<option>Latvia</option>
<option>Lebanon</option>
<option>Lesotho</option>
<option>Liberia</option>
<option>Libya</option>
<option>Liechtenstein</option>
<option>Lithuania</option>
<option>Luxembourg</option>
<option>Macao</option>
<option>Madagascar</option>
<option>Malawi</option>
<option>Malaysia</option>
<option>Maldives</option>
<option>Mali</option>
<option>Malta</option>
<option>Marshall Islands</option>
<option>Martinique</option>
<option>Mauritania</option>
<option>Mauritius</option>
<option>Mayotte</option>
<option>Mexico</option>
<option>Micronesia</option>
<option>Moldova</option>
<option>Monaco</option>
<option>Mongolia</option>
<option>Montenegro</option>
<option>Montserrat</option>
<option>Morocco</option>
<option>Mozambique</option>
<option>Myanmar</option>
<option>Namibia</option>
<option>Nauru</option>
<option>Nepal</option>
<option>Netherlands</option>
<option>Netherlands Antilles</option>
<option>New Caledonia</option>
<option>New Zealand</option>
<option>Nicaragua</option>
<option>Niger</option>
<option>Nigeria</option>
<option>Norfolk Island</option>
<option>North Korea</option>
<option>Norway</option>
<option>Oman</option>
<option>Pakistan</option>
<option>Palau</option>
<option>Palestinian Territory</option>
<option>Panama</option>
<option>Papua New Guinea</option>
<option>Paraguay</option>
<option>Peru</option>
<option>Philippines</option>
<option>Pitcairn</option>
<option>Poland</option>
<option>Portugal</option>
<option>Puerto Rico</option>
<option>Qatar</option>
<option>Romania</option>
<option>Russian Federation</option>
<option>Rwanda</option>
<option>Saint Helena</option>
<option>Saint Kitts and Nevis</option>
<option>Saint Lucia</option>
<option>Saint Pierre and Miquelon</option>
<option>Saint Vincent and the Grenadines</option>
<option>Samoa</option>
<option>San Marino</option>
<option>Sao Tome and Principe</option>
<option>Saudi Arabia</option>
<option>Senegal</option>
<option>Serbia</option>
<option>Seychelles</option>
<option>Sierra Leone</option>
<option>Singapore</option>
<option>Slovakia</option>
<option>Slovenia</option>
<option>Solomon Islands</option>
<option>Somalia</option>
<option>South Africa</option>
<option>South Georgia</option>
<option>South Korea</option>
<option>Spain</option>
<option>Sri Lanka</option>
<option>Sudan</option>
<option>Suriname</option>
<option>Svalbard and Jan Mayen</option>
<option>Swaziland</option>
<option>Sweden</option>
<option>Switzerland</option>
<option>Syrian Arab Republic</option>
<option>Taiwan</option>
<option>Tajikistan</option>
<option>Tanzania</option>
<option>Thailand</option>
<option>The Former Yugoslav Republic of Macedonia</option>
<option>Timor-Leste</option>
<option>Togo</option>
<option>Tokelau</option>
<option>Tonga</option>
<option>Trinidad and Tobago</option>
<option>Tunisia</option>
<option>Turkey</option>
<option>Turkmenistan</option>
<option>Tuvalu</option>
<option>Uganda</option>
<option>Ukraine</option>
<option>United Arab Emirates</option>
<option>United Kingdom</option>
<option>United States</option>
<option>United States Minor Outlying Islands</option>
<option>Uruguay</option>
<option>Uzbekistan</option>
<option>Vanuatu</option>
<option>Vatican City</option>
<option>Venezuela</option>
<option>Vietnam</option>
<option>Virgin Islands, British</option>
<option>Virgin Islands, U.S.</option>
<option>Wallis and Futuna</option>
<option>Western Sahara</option>
<option>Yemen</option>
<option>Zambia</option>
<option>Zimbabwe</option>
</select></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="text" name="EMail" /></td>
</tr>
<tr>
<td align="right">Phone</td>
<td><input type="text" name="Phone" /></td>
</tr>
<tr>
<td align="right">Quote:</td>
<td>
<select name="quote" style="width: 166px; height:22px;">
<option value="-1">Choose..</option>
<option>BPO / Tech Support</option>
<option>IT Consulting</option>
<option>Website Designing</option>
<option>Website Re-Designing</option>
<option>PSD to HTML</option>
<option>WebSite Development</option>
<option>Software Development</option>
<option>E-Commerce Development</option>
<option>CMS Development</option>
<option>Wordpress Development</option>
<option>Joomla Development</option>
<option>Logo Designing</option>
<option>Domain Registration</option>
<option>Web Hosting</option>
<option>Server Solutions</option>
<option>Gateway Integrations</option>
<option>SEO / Web Promotions</option>
<option>Social Media Optimization</option>
<option>Mobile Applications</option>
<option>Other</option>
</select>
</td>
</tr>
<tr>
<td align="right">Comments:</td>
<td><textarea cols="20" name="Comments" style="height: 43px"></textarea> </td>
</tr>
<tr>
<td align="right"></td>
<td><input type="button" id="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
答案 0 :(得分：0)
$("#submit").click(function () {
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
var alphaExp = /^[a-zA-Z ]+$/;
if(myForm.Name.value.match(alphaExp)){
}else{
alert( "Name Should be in Alphabet!" );
myForm.Name.focus();
return false;
}
if( document.myForm.Country.value == "-1" )
{
alert( "Please provide your country!" );
return false;
}
if( document.myForm.EMail.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(!myForm.EMail.value.match(emailExp)){
alert( "Email ID appears to be Invalid" );
myForm.EMail.focus();
return false;
}
if( document.myForm.Phone.value == "" ||
isNaN( document.myForm.Phone.value ) ||
document.myForm.Phone.value.length != 10 )
{
alert( "Please provide a 10 Digit Mobile No." );
document.myForm.Phone.focus() ;
return false;
}
if( document.myForm.quote.value == "-1" )
{
alert( "Please provide your Quote!" );
return false;
}
$.post("formsubmit.php", $("#myForm").serialize(), function(response) {
$.notifyBar({ cssClass: "success", html: "Mail sent Successfully!" });
});
return false; // prevent default form submit
}
答案 1 :(得分：0)
我同意Barmar的评论。
使用实际的jQuery.ajax而不是使用不合适的速记方法，而不是使用验证功能beforeSend。
或者您可以从（匿名）验证函数（function(response) {...}）的末尾调用$ .post（...）。那么您当然应该在点击时调用该验证功能。 （编辑：这将符合Barmar的实际答案，我得到了忍者）