Jquery验证无法处理php表单操作

时间:2018-04-30 18:21:52

标签: javascript php jquery

我正在使用表单操作php submit进行jquery验证。我使用点击功能创建了jquery验证,第一次它在第二次点击时验证输入字段,它重定向到形成动作网址。如何使用客户端验证来防止这种情况。我该如何解决这个问题。

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


        });

2 个答案:

答案 0 :(得分:1)

更改类型=&#34;按钮&#34;

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

答案 1 :(得分:0)

.click事件中的function()可以接受事件处理程序的参数。

$('input[name="enquiry-submit"]').click(function(ev) { ...

您可以使用ev.preventDefault();在验证通过之前保持帖子实际发生。您需要手动触发表单帖子。

$('input[name="enquiry-submit"]').click(function(ev) {
  ev.preventDefault();
...
}