0
テキストを送信するフォームを作成しました。私の問題は、送信するフォームを取得したり、検証が機能するために、フォームの送信ボタンを2回押す必要があることです。私は、ユーザーが次の入力に行くか、少なくとも最初のフォームの投稿に行く直後に、検証が機能するようにしたいと思います。送信ボタンが2回クリックされない限り、送信されないフォームとjQueryの検証が機能しません
これが機能するには、フォームのボタンを2回クリックする必要があるのはなぜですか？私はそれが何をしているかを示すスニペットを作成しました。
$('.text-popup').hide();
//$("#submit-text").on("click", function(event) {
$("#text-form").on("submit", function(event) {
\t event.preventDefault();
\t
var number = $("#number").val();
var carrier = $("#carrier").val();
var message = $("#message").val();
\t 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!") {
\t \t \t \t alert("Unable to send email!");
\t \t \t \t alert(data);
} else {
\t \t \t \t $("#text-form")[0].reset();
\t \t \t \t $('.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">
\t \t <input type="number" name="number" placeholder="Recipient Phone Number" class="number-input" id="number">
\t \t <select class="carrier-input" id="carrier" name="carrier">
\t \t \t <option selected="selected">Phone Carrier</option>
\t \t \t <option value="vtext.com">Verizon</option>
\t \t \t <option value="vmobl.com">Virgin Mobile</option>
\t \t \t <option value="sms.alltelwireless.com">Alltel</option>
\t \t \t <option value="txt.att.net">AT&T</option>
\t \t \t <option value="sms.myboostmobile.com">Boost Mobile</option>
\t \t \t <option value="text.republicwireless.com">Republic Wireless</option>
\t \t \t <option value="messaging.sprintpcs.com">Sprint</option>
\t \t \t <option value="tmomail.net">T-Mobile</option>
\t \t \t <option value="email.uscc.net">U.S. Cellular</option>
\t \t </select>
\t \t <textarea placeholder="Your Message" class="message-input" id="message" name="message" rows="10"></textarea>
\t \t <input type="submit" value="Send Text" id="submit-text">
\t \t <div class="text-popup" data-popup="popup-1">
\t \t \t <div class="popup-inner">
\t \t \t \t <div id="popup-inner-content">Your text successfully sent!</div>
\t \t \t \t \t <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
\t \t \t </div>
\t \t </div>
\t </form>
感謝。キャリア選択入力の検証方法を知っていますか？私は最初のオプション（私はプレースホルダーとして使用）を入力して、 – Becky
が時には最高の解決策が最も単純なものであることを常に見ているので、その作業を行う方法がわかりません。 ''の値を電話会社に最初のオプションに与えます。 – imvain2
助けてくれてありがとう！ – Becky