我需要使用jQuery驗證表單數據之前，我可以使用PHP

Question

這裏是我的形式，我使用HTML和Bootstrap

<div class="col-sm-7 slideanim"> 
    <form id="frm-post-comment" name="frm-post-comment" method="post" action="#"> 
    <input type="hidden" name="the-comment" value="true"> 
    <div class="row"> 
     <div class="col-sm-6 form-group"> 
     <input class="form-control" name="name" placeholder="Name" type="text"> 
     </div> 
     <div class="col-sm-6 form-group"> 
     <input class="form-control" name="email" placeholder="Email" type="email"> 
     </div> 
    </div> 
    <textarea class="form-control" name="comments" placeholder="Comment" rows="5"></textarea> 
    <br> 
    <div class="row"> 
     <div class="col-sm-12 form-group"> 
     <button id="comment-post" class="btn btn-info pull-right" type="submit">Send</button> 
     </div> 
    </div> 
    </form> 
</div> 

然後我想用JQuery驗證表單輸入，這裏是創建張貼在驗證碼

$(document).ready(function() { 
    $("#comment-post").click(function() { 
    submitComment(); 
    $("#comment-pst-alert").show(); 
    $("html,body").animate({ 
     scrollTop: 0 
    }, "slow"); 
    }); 
}); 

function submitComment() { 
    var msg = ""; 
    var name = $("#name").val(); 
    var email = $("#email").val(); 
    var comments = $("#comments").val(); 
    var re = /^[A-Za-z]+$/; 

    if (name == "" || name.length < 3) { 
    msg += "*Please enter a valid name,it must be longer than three characters.<br>"; 
    } 

    if (!re.test(name)) { 
    msg += "*Please enter a valid name,it must not contain numbers."; 
    } 

    var chkEmail = /^[a-z0-9._%-]+@[a-z0-9.-]+\.[a-z]{2,4}$/; 

    if (email == "") { 
    msg += "<br>*Please enter an email address."; 
    } 

    if (email.length < 8) { 
    msg += "<br>*Email address cannot be less than 8 characters"; 
    } 

    if (email.search('@') == -1) { 
    msg += "<br>*Email must have a @,please enter a valid email address."; 
    } 

    if (comments == "") { 
    msg += "<br>*Please enter a comment."; 
    } 

    if (comments.length > 70) { 
    msg += "<br>*The comment can not exceed 70 characters"; 
    } 

    if (msg != "") { 
    $("#comment-pst-alert").addClass("alert-danger"); 
    $("#comment-pst-alert").children("strong").text("Warning"); 
    $("#comment-pst-alert").children("p").html(msg); 
    } 
    else { 
    $("#name").val(""); 
    $("#email").val(""); 
    $("#comments").val(""); 

    var closeAlert = $("<a/>", { 
     "class": "close", 
     "data-dismiss": "alert", 
     "text": "x" 
    }); 

    $("#comment-pst-alert strong").before(closeAlert); 
    $("#comment-pst-alert").removeClass("alert-danger"); 
    $("#comment-pst-alert").addClass("alert-success"); 
    $("#comment-pst-alert").children("strong").text("Success"); 
    msg += "<br>You have successfully submitted your details, you will  here from us within 24 hours."; 
    $("#comment-pst-alert").children("p").html(msg); 
    } 

    $("#comment-pst-alert").show(); 
} 

我有一個使用CSS最初隱藏在bootstrap alert control。如果在用戶輸入中有錯誤，我將顯示警報控制並將relevant class添加到它。如果沒有錯誤，我想刪除前類並添加success class到警報控件，然後我想提交輸入並使用PHP將數據添加到數據庫中。

$connection = mysql_connect('localhost', 'root', 'root'); 

if ($connection) { 
    if ($_POST["name"] != "" || 
     $_POST["email"] != "" || 
     $_POST["comments"] != "") { 
    mysql_select_db("smart_hustle_comments") or die("could not select table ".mysql_error()); 
    $name = $_POST["name"]; 
    $email = $_POST["email"]; 
    $comment = $_POST["comments"]; 

    $sql = "INSERT INTO user_comments VALUES('$name','$email','$comment')"; 
    $query = mysql_query($sql); 
    } 
} 

我得到在控制檯上也沒有對PHP沒有錯誤，表單提交，但不執行JQuery驗證，請幫助。

Answer 1

你的jQuery驗證被忽略，因爲你同時提交表單與驗證。 將您的按鈕類型更改爲button類型，而不是submit，成功驗證後使用$('#frm-post-comment').submit();應用表單。