我创建了一个表单来发送文本。我的问题是我必须按两次提交按钮才能使表单发送或验证工作。我希望验证在用户进入下一个输入后或者至少在第一个表单提交时立即工作。
为什么表单的按钮需要点击两次以使其中的任何一个工作？我创建了一个片段，显示它正在做什么。
$('.text-popup').hide();
//$("#submit-text").on("click", function(event) {
$("#text-form").on("submit", function(event) {
event.preventDefault();
var number = $("#number").val();
var carrier = $("#carrier").val();
var message = $("#message").val();
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$("#text-form").validate({
onfocusout: true,
rules: {
number: {
required: true,
minlength: 2
},
carrier: {
required: true
},
message: {
required: true,
minlength: 2
}
},
messages: {
number: {
required: "Please enter the party's phone number.",
minlength: "The phone number seems a bit short, doesn't it?"
},
carrier: {
required: "Please choose their carrier"
},
message: {
required: "Please enter your message",
minlength: "Your message seems a bit short. Please enter at least 2 characters"
}
},
submitHandler: function(form) {
$.ajax({
url: "text-send.php",
type: "POST",
data: {
"number": number,
"carrier": carrier,
"message": message
},
success: function(data) {
//console.log(data); // data object will return the response when status code is 200
if (data == "Error!") {
alert("Unable to send email!");
alert(data);
} else {
$("#text-form")[0].reset();
$('.text-popup').fadeIn(350).delay(2000).fadeOut();
}
},
complete: function() {
$('body, html').animate({
scrollTop: $('#text-success').offset().top
}, 'slow');
},
error: function(xhr, textStatus, errorThrown) {
alert(textStatus + "|" + errorThrown);
//console.log("error"); //otherwise error if status code is other than 200.
}
});
}
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<form action="" method="POST" id="text-form">
<input type="number" name="number" placeholder="Recipient Phone Number" class="number-input" id="number">
<select class="carrier-input" id="carrier" name="carrier">
<option selected="selected">Phone Carrier</option>
<option value="vtext.com">Verizon</option>
<option value="vmobl.com">Virgin Mobile</option>
<option value="sms.alltelwireless.com">Alltel</option>
<option value="txt.att.net">AT&T</option>
<option value="sms.myboostmobile.com">Boost Mobile</option>
<option value="text.republicwireless.com">Republic Wireless</option>
<option value="messaging.sprintpcs.com">Sprint</option>
<option value="tmomail.net">T-Mobile</option>
<option value="email.uscc.net">U.S. Cellular</option>
</select>
<textarea placeholder="Your Message" class="message-input" id="message" name="message" rows="10"></textarea>
<input type="submit" value="Send Text" id="submit-text">
<div class="text-popup" data-popup="popup-1">
<div class="popup-inner">
<div id="popup-inner-content">Your text successfully sent!</div>
<a class="popup-close" data-popup-close="popup-1" href="#">x</a>
</div>
</div>
</form>
答案 0 :(得分：1)
您遇到的问题是验证插件不需要包含在onclick中。删除它周围的Onclick事件。 validate插件运行表单的ONSUBMIT。
$('.text-popup').hide();
var number = $("#number").val();
var carrier = $("#carrier").val();
var message = $("#message").val();
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$("#text-form").validate({
onfocusout: true,
rules: {
number: {
required: true,
minlength: 2
},
carrier: {
required: true
},
message: {
required: true,
minlength: 2
}
},
messages: {
number: {
required: "Please enter the party's phone number.",
minlength: "The phone number seems a bit short, doesn't it?"
},
carrier: {
required: "Please choose their carrier"
},
message: {
required: "Please enter your message",
minlength: "Your message seems a bit short. Please enter at least 2 characters"
}
},
submitHandler: function(form) {
$.ajax({
url: "text-send.php",
type: "POST",
data: {
"number": number,
"carrier": carrier,
"message": message
},
success: function(data) {
//console.log(data); // data object will return the response when status code is 200
if (data == "Error!") {
alert("Unable to send email!");
alert(data);
} else {
$("#text-form")[0].reset();
$('.text-popup').fadeIn(350).delay(2000).fadeOut();
}
},
complete: function() {
$('body, html').animate({
scrollTop: $('#text-success').offset().top
}, 'slow');
},
error: function(xhr, textStatus, errorThrown) {
alert(textStatus + "|" + errorThrown);
//console.log("error"); //otherwise error if status code is other than 200.
}
});
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<form action="" method="POST" id="text-form">
<input type="number" name="number" placeholder="Recipient Phone Number" class="number-input" id="number">
<select class="carrier-input" id="carrier" name="carrier">
<option value="" selected="selected">Phone Carrier</option>
<option value="vtext.com">Verizon</option>
<option value="vmobl.com">Virgin Mobile</option>
<option value="sms.alltelwireless.com">Alltel</option>
<option value="txt.att.net">AT&T</option>
<option value="sms.myboostmobile.com">Boost Mobile</option>
<option value="text.republicwireless.com">Republic Wireless</option>
<option value="messaging.sprintpcs.com">Sprint</option>
<option value="tmomail.net">T-Mobile</option>
<option value="email.uscc.net">U.S. Cellular</option>
</select>
<textarea placeholder="Your Message" class="message-input" id="message" name="message" rows="10"></textarea>
<input type="submit" value="Send Text" id="submit-text">
<div class="text-popup" data-popup="popup-1">
<div class="popup-inner">
<div id="popup-inner-content">Your text successfully sent!</div>
<a class="popup-close" data-popup-close="popup-1" href="#">x</a>
</div>
</div>
</form>