javascript - Jquery 验证不适用于 php 表单操作

Question

我正在使用表单操作 php 提交进行 jquery 验证。我使用 click 函数创建了 jquery 验证，第一次它验证输入字段，第二次单击它重定向到表单操作 url。如何使用客户端验证来防止这种情况。我该如何解决这个问题。

<form action="test.php" method="post">
        <input class="qemail" name="your-email-address" placeholder="Your email address" value="" type="text">
        <textarea class="qmessage" name="your-enquiry" rows="8" placeholder="Your message"></textarea>
        <input id="submit_sf" name="enquiry-submit" value="SUBMIT" type="submit">
    </form>

$(document).ready(function(){
            $('input[name="enquiry-submit"]').click(function(){
                var email = $('.qemail').val();
                var msg = $('.qmessage').val();

                var email_regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

                if(!email.match(email_regex) || email.length == 0 ){

                if ($('.qemail').prev(".rvalidation").length == 0){     
                  $('.qemail').before('<p class="rvalidation" style="position:relative; color: #000; font-size:12px;">Please enter a valid Details *</p>');
                  $(".qemail").focus();      
                    console.log("email field is empty");
                    $(".qemail").focus();
                   //console.log("validate1"); \
                  return false;
                } 
                    //return false;
                }
                if(msg.length == 0){
                    console.log("message field is empty");
                    return false;
                }
            });


        });

Answer 1

更改类型=“按钮”

<button id="submit_sf" name="enquiry-submit" value="SUBMIT" type="button">Submit</button>