0
私はjavascript/jqueryの初心者です。JQueryの検証とフォーム提出 - 送信ボタンを2回押す必要があります
JQueryを通じて登録フォームを検証しようとしていますが、検証はうまくいきますが、フォームを送信する前に少し問題があります。
正確には、検証を実行して2回目に実際にフォームを送信するために、ユーザーは最初に2回submitを押す必要があります。
submitを一度押すと、すべての検証ルールを通過してフォーミュラを送信するコードは何ですか？
$('document').ready(function()
{
// name validation
var nameregex = /^[a-zA-Z ]+$/;
$.validator.addMethod("validname", function(value, element) {
return this.optional(element) || nameregex.test(value);
});
// valid email pattern
var eregex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
$.validator.addMethod("validemail", function(value, element) {
return this.optional(element) || eregex.test(value);
});
$("#register-form").validate({
rules:
{
name: {
required: true,
validname: true,
minlength: 4
},
email: {
required: true,
email: true,
validemail: true
},
mobile_number: {
required: true
//phoneUK: true
},
},
messages:
{
name: {
required: "Please enter your first name",
validname: "Name must contain only alphabets and space",
minlength: "Your name is too short"
},
email: {
required: "Please enter e-mail address",
validemail: "Enter a valid e-mail address"
},
mobile_number:{
required: "Please enter a valid phone number"
}
},
errorPlacement : function(error, element) {
$(element).closest('.form-group').find('.help-block').html(error.html());
},
highlight : function(element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
$(element).closest('.form-group').find('.help-block').html('');
},
submitHandler: function(form) {
$("#register-form").on("submit", function (e) {
e.preventDefault();
var postData = new FormData($(this)[0]);
var formURL = $(this).attr("action");
var method = $(this).attr("method");
$.ajax({
url: formURL,
type: method,
data: postData,
cache: false,
contentType: false,
processData: false,
success: function (data) {
$("#register_dialog .modal-header .modal-title").html("Thank you!");
$("#register_dialog .modal-body").html(data);
$("#submitForm").remove();
},
error: function (jqXHR, status, error) {
console.log(status + ": " + error);
}
});
});
}
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<div id="register_dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="register_dialog"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content modal-sm">
<div class="modal-header form-group">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="registerDialogLabel">Registration form</h4>
</div>
<div class="modal-body">
<hr />
<form method="POST" id="register-form" name="register-form" action="form.php"
autocomplete="off">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
<input type="text" class="form-control" name="name" id="name" minlength="3"
placeholder="First Name"
/>
</div>
<span class="help-block" id="error"></span>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
<input type="text" class="form-control" name="email" id="email"
placeholder="E-mail address"
/>
</div>
<span class="help-block" id="error"></span>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></div>
<input type="number"
class="form-control" name="mobile_number" id="mobile_number"
placeholder="Contact Number"
/>
</div>
<span class="help-block" id="error"></span>
</div>
<hr/>
<button type="submit" class="btn btn-primary btn-fresh">
<span class="glyphicon glyphicon-log-in"></span> Submit
</button>
</form>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
私はあなたのソリューションを試してみました。データがform.phpに渡されるまで動作します。私は空のフィールドを受け取ります。私はそれを調べ続けるつもりです。どうもありがとう。 –
@OctavianCristea、あなたは 'FormData（）'の代わりに '$（form）.serialize（）'を試しましたか？ – Sparky
@OctavianCristea、あなたがデータを取得していない場合でも、あなたのAjax設定ではまったく異なる問題があるようです。私はあなたが約尋ねた唯一のものであるオリジナルのクリック2回の問題を完全に解決しました – Sparky