我是javascript / jquery的全新手。
我正在尝试通过JQuery验证注册表单，验证工作正常，但在提交表单之前我有一点问题。
确切地说，用户必须第二次按提交两次，以便运行验证，第二次按实际提交表单。
按下提交一次的解决方案和代码是否经过所有验证规则，然后提交公式？
$('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>
答案 0 :(得分：0)
我已经通过将输入类型更改为文本解决了问题，对于mobile_number字段，我在该规则上添加了数字，但我仍然有两次提交问题。
答案 1 :(得分：0)
用户必须按两次提交...
之所以发生这种情况，是因为您已将.on('submit')置于插件的submitHandler功能中：
submitHandler: function(form) {
$("#register-form").on("submit", function (e) { // <- ?!
e.preventDefault();
....
实际上，这是submit处理程序内的submit处理程序。
删除.on('submit')，您将立即修复＆＃34;点击两次＆＃34;问题。该插件已经正确处理了重要事件，并且它已经阻止了默认行为，因此您不需要.preventDefault()。 submitHandler只会在表单生效后触发。
此外，您只需使用提供的form参数。
$("#register-form").validate({
.....
submitHandler: function(form) {
var postData = new FormData($(form)),
formURL = $(form).attr("action"),
method = $(form).attr("method");
$.ajax({
....
});
return false;
}
});
答案 2 :(得分：-1)
尝试动作=“javascript：;”
<form method="POST" id="register-form" name="register-form" action="javascript:;"
autocomplete="off">