0

我的代码有什么问题..

我希望在填写整个表单后单击提交，然后会显示 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>&nbsp;</td>
 </tr>
 <tr>
   <td align="right"></td>
   <td><input type="button" id="submit" value="Submit" /></td>
 </tr>
 </table>
 </form>

 </body>
 </html>
4

2 回答 2

0

我同意 Barmar 的评论。

不要使用不适当的速记方法，而是使用实际的jQuery.ajax并将该验证函数作为beforeSend.

或者，您可以从（匿名）验证函数 ( ) 的末尾调用 $.post(... function(response) {...})。然后，您当然应该在单击时调用该验证函数。（编辑：这将符合 Barmar 的实际答案，我得到了忍者）

于 2013-06-01T05:02:46.917 回答
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

}
于 2013-06-01T04:57:26.543 回答