2013-07-29 39 views
0

我的jQuery驗證和php表單都一次執行,表示驗證錯誤正在顯示,並且執行了php動作。這裏是完整的代碼。 jQuery的表單提交函數返回FALSE如果有形式上的錯誤,但甚至認爲得到執行的形式..一次執行php表單動作和jquery驗證

<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 = /^\[email protected][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; 
      } 
     } 
    }); 
+1

您需要使用邏輯與運算符(&&)而不是按位運算符(&).REF:http://publib.boulder.ibm.com/infocenter/lnxpcomp/v8v101/index.jsp?topic =%2Fcom.ibm.xlcpp8l.doc%2Flanguage% 2Fref%2Fbitande.htm – dreamweiver

回答

1

你必須使用preventDefault()功能。提交函數不能被取消,返回false。這是一個事件,並且有許多處理者正在傾聽它。你必須停止從傳播,從而防止處理程序來處理該事件的事件;) 代碼:

$("form").submit(function(e){ 
    if(!(validateName() && validateEmail() && validateContact() && validateSkype() && validateMessage())){ 
     e.preventDefault(); 
     // and maybe some alert() with fail info 
    } 
    else{ 
     //whatever you need if validation suceeds 
    } 
}); 
+0

好友它不工作 –

+0

嘗試使用'$(「#step-three」)。submit'而不是'$(「form」)。submit'。 –

0

使用&&地方& 我希望這將有助於

+0

'&&'和'&'在大多數編程語言中非常相似(我認爲它也適用於js)。主要區別在於'&&'操作符在其中一個失敗時停止檢查其他條件,而'&'將執行下一個條件,即使已經存在'false'。 –

+0

這是工作,但驗證錯誤顯示一個接一個,但不是一次,如果我提交沒有給任何輸入 –

+0

返回false;從函數 –