Question

我的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;
           }
       }
   });

Answer 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
    }
});

Answer 2

使用&& &的地方我希望它会有所帮助

php表单动作和jquery验证立即执行

2 个答案: