[英]JQuery Validation Working, but submitHandler is not
我有一個表格,我正在嘗試使用 JQuery Validate 進行驗證,它工作正常。 單擊提交按鈕時,submitHandler 應該 1. 禁用按鈕(以防止多次提交)和 2. 更改按鈕文本。
照原樣,代碼用於驗證,但不調用 submitHandler。
我在這里查看了許多線程,說按鈕必須是 type="submit",在<form>
標簽內等,但無法弄清楚。 該按鈕仍然可以被多次單擊。
有什么幫助嗎?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#freebottleform").validate({
rules: {
address : {
required: true
},
city : {
required: true
},
state : {
required: true
},
zipcode : {
required: true
},
phoneNumber : {
required: true,
phoneUS: true
},
},
//Specify the validation error messages here
messages: {
email: {
required: "Please enter email address",
email: "Please enter a valid email address"
},
phoneNumber: {
required : "Please enter your mobile number",
digits: "Please enter digits only"
}
},
submitHandler: function (form) {
$("#finalSubmit").attr("disabled", true);
$("#finalSubmit").html("Submitting... please wait.");
form.submit();
}
});
});
</script>
<!DOCTYPE html>
<html lang="en">
<div class="freebottleform">
<form method="post" id="freebottleform" name="freebottleform" action="p6.php">
Please enter your shipping details.<br>
<br>
Address:<br>
<input type="text" name="address" class="required" placeholder="Please enter your address."/><br>
<input type="text" name="address2" placeholder="Suite/Apt/Etc."/><br>
<br>
City:<br>
<input type="text" name="city" class="required" placeholder="Please enter your city."/><br>
<br>
State:<br>
<input type="text" name="state" class="required" placeholder="Please enter your state."/><br>
<br>
Zip Code:<br>
<input type="text" name="zipcode" class="required" placeholder="Please enter your zipcode."/><br>
<br>
Phone Number:<br>
<input type="text" name="phoneNumber" class="required" placeholder="Please enter your phone number."/><br>
<br>
<label><input type="checkbox" name="subscribe" id="subscribe" value="true" checked/> Subscribe to our newsletter to get FREE weekly tips sent right to your inbox!</label><br>
<br>
<button id="finalSubmit" type="submit" name="submit" value="final" >CONTINUE</button>
</form>
</div>
</html>
您可以在客戶端進行驗證並在按鈕的單擊事件上禁用該按鈕。
<script type="text/javascript">
$("#finalSubmit").click(function()
{
//do your validation and if correct then disable the button
$("#finalSubmit").attr("disabled", true);
//other work if any
}
);
</script>
首先,不要使用 jQuery 進行驗證,而是像使用 PHP 等一樣在服務器端進行驗證,並在顯示頁面上反映 output。
這里有一個例子:
index.php
<!DOCTYPE html>
<html>
<head>
<title>Site Title</title>
</head>
<body>
<h1>Form</h1>
<div class="message"></div>
<form method="post" action="" name="registrationForm">
First Name <input type="text" name="fname"><br>
Last Name <input type="text" name="lname"><br>
Phone <input type="text" name="phone"><br>
<input type="submit" value="Register" class="regbtn">
</form>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$(".regbtn").click(function(){
var form = document.registrationForm;
var dataString = $(form).serialize();
$.ajax({
type: 'POST',
url: "your-processing-page.php",
data: dataString,
cache: true,
beforeSend: function(){
$('.message').hide();
$(".regbtn").prop('disabled', true).val('Please wait...');
},
success: function(data){
$('.message').html(data).fadeIn();
$(".regbtn").prop('disabled', false).val('Register');
}
});
return false;
});
});
</script>
</body>
</html>
你的處理頁面.php
<?php
$fname = (!empty($_POST['fname']))?$_POST['fname']:null;
$lname = (!empty($_POST['lname']))?$_POST['lname']:null;
$phone = (!empty($_POST['phone']))?$_POST['phone']:null;
if($_POST){
// Perform Checks Here
if(trim($fname) == ''){
echo "Please enter first name.";
}else if(trim($lname) == ''){
echo "Please enter last name.";
}else if((strlen($phone)) == 0){
echo "Please enter a phone number";
}else if((strlen($phone)) < 10){
echo "Phone number must not contain less than 10 digits.";
}else if((strlen($phone)) > 10){
echo "Phone number must not contain more than 10 digits.";
}else{
// If all checks are cleared perform your query
$stmt = $pdo->prepare("INSERT INTO members(mem_fname, mem_lname, mem_phone)VALUS(:fname, :lname, :phone)");
$stmt-> bindValue(':fname', $fname);
$stmt-> bindValue(':lname', $lname);
$stmt-> bindValue(':phone', $phone);
$stmt-> execute();
if($stmt){
echo "Success! User has been registered.";
}else{
echo "Sorry, something went wrong. Please refresh the page and try again!";
}
}
}
?>
這是一個完整的答案。 這里:
注意:以上是一個完全工作的“標准”編碼示例。 這就是你應該編碼的方式。 但是,根據您的需要執行其他必要的檢查。 將上述編碼僅作為示例來構建您自己的代碼。 快樂編碼:)
將提交按鈕名稱更改為其他名稱,因為它會覆蓋表單上的 submit() function,然后此代碼應該適合您( 參考)。 ↓↓
$(document).ready(function() { $("#freebottleform").validate({ rules: { address: { required: true }, city: { required: true }, state: { required: true }, zipcode: { required: true }, phoneNumber: { required: true, // phoneUS: true, digits: true }, }, //Specify the validation error messages here messages: { email: { required: "Please enter email address", email: "Please enter a valid email address" }, phoneNumber: { required: "Please enter your mobile number", digits: "Please enter digits only" } }, submitHandler: function(form) { $("#finalSubmit").attr("disabled", true); $("#finalSubmit").html("Submitting... please wait."); setTimeout(function() { form.submit(); }, 3000); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script> <.DOCTYPE html> <html lang="en"> <head> </head> <div class="freebottleform"> <form method="post" id="freebottleform" name="freebottleform" action="p6.php"> Please enter your shipping details:<br> <br> Address. <br> <input type="text" name="address" class="required" placeholder="Please enter your address." /><br> <input type="text" name="address2" placeholder="Suite/Apt/Etc:" /><br> <br> City. <br> <input type="text" name="city" class="required" placeholder="Please enter your city:" /><br> <br> State. <br> <input type="text" name="state" class="required" placeholder="Please enter your state:" /><br> <br> Zip Code.<br> <input type="text" name="zipcode" class="required" placeholder="Please enter your zipcode:" /><br> <br> Phone Number.<br> <input type="text" name="phoneNumber" class="required" placeholder="Please enter your phone number." /><br> <br> <label><input type="checkbox" name="subscribe" id="subscribe" value="true" checked/> Subscribe to our newsletter to get FREE weekly tips sent right to your inbox!</label><br> <br> <button id="finalSubmit" type="submit" name="save" value="final">CONTINUE</button> </form> </div> </html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.