[英]Combine Validation (js), submit (php) and modal (bootstrap) in form
I am using Bootstrap to create a simple contact form and would like to achieve the following when pressing the "submit" button: 我正在使用Bootstrap创建一个简单的联系表单,并且在按下“提交”按钮时想要实现以下目的:
Knowing that my PHP and JS knowledge is below average, I am glad to say that I have been able to make all items work separately, but I am not able to combine them... 知道我的PHP和JS知识低于平均水平,我很高兴地说我能够使所有项目分开工作,但我无法将它们组合在一起...
Could you give me some input? 你能给我一些意见吗?
Validation uses : 验证用途:
var validator = $("#contact").validate({
...
PHP uses : PHP用途:
mail()
Both work when submitting the form with a button like this: 都可以通过以下按钮提交表单:
<button type="submit" name="submit" id="submitButton" class="btn btn-bcome pull-right">Send</button>
To activate the dialog, I changed the button to: 要激活对话框,我将按钮更改为:
<button href="#submit" role="button" button type="submit" name="submit" id="submitButton" class="btn btn-bcome pull-right" data-toggle="modal">Send</button>
This makes the modal appear correctly, but validation and submission do not occur. 这样可以使模态正确显示,但不会进行验证和提交。
I have found a related post : jQuery Modal that appears on form submit . 我发现了一个相关的文章: jQuery Modal出现在表单提交中 。 But I do not know to adapt this specifically to my case. 但是我不知道如何专门针对我的情况。
I have tried to adapt what you told me and this is what I got : Html part : 我试图适应您告诉我的内容,这就是我得到的:HTML部分:
button href="#submit" role="button" button type="submit" name="submit" id="submitButton" class="btn btn-bcome pull-right" data-toggle="modal">Envoyer</button>
and 和
<div id="submit" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Thanks for your mail</h3>
</div>
<div class="modal-body">
<p>We will get back to you soon</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
In my JS file : 在我的JS文件中:
var $validator = {};
$(document).ready(function()
{
// validate signup form on keyup and submit
var validator = $("#contact").validate({
submitHandler: function(form)
{
//code to submit your form here
//code to open your modal here
errorClass:'error',
validClass:'success',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass(errorClass).addClass(validClass);
},
rules: {
fname: {
required: true,
minlength: 2
},
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 10
}
},
messages: {
fname: {
required: '<span class="help-inline">First name.</span>',
minlength: jQuery.format('<span class="help-inline">2 chars</span>')
},
name: {
required: '<span class="help-inline">Name.</span>',
minlength: jQuery.format('<span class="help-inline">2 chars</span>')
},
email: {
required: '<span class="help-inline">Email.</span>',
email: '<span class="help-inline">Ex : name@exemple.com</span>'
},
message: {
required: '<span class="help-block">Message</span>',
minlength: jQuery.format('<span class="help-block">10 chars</span>')
$('form').submit(function() {
if ($validator.numberOfInvalids() > 0) {
$('#submit').modal('hide');
} else {
$('#submit').modal('show');
}
}
});
}
);
I am surely missing something but for the moment, only the modal part is executed and not the validation part or submit form part. 我肯定会丢失一些东西,但目前仅执行模态部分,而不执行验证部分或提交表单部分。
Any idea what I should do to make this work? 知道我应该怎么做才能使这项工作吗?
If you're using bassastance's jquery validation plugin, you are looking for the submitHandler option, which is defined here: http://docs.jquery.com/Plugins/Validation/validate#toptions 如果您使用的是bassastance的jquery验证插件,那么您将在此处定义的submitHandler选项中查找: http ://docs.jquery.com/Plugins/Validation/validate#toptions
$(document).ready(function()
{
// validate signup form on keyup and submit
var validator = $("#contact").validate({
submitHandler: function(form)
{
//code to submit your form here
//code to open your modal here
}
});
}
);
UPDATE: I'm updating this answer based on further code provided by Fred. 更新:我正在根据弗雷德提供的更多代码来更新此答案。
Javascript: Javascript:
var $validator; //declared for further use later
$(document).ready(function()
{
// validate signup form on keyup and submit
$validator = $("#contact").validate({
errorClass:'error',
validClass:'success',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass(errorClass).addClass(validClass);
},
rules: {
fname: {
required: true,
minlength: 2
},
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 10
}
},
messages: {
fname: {
required: '<span class="help-inline">First name.</span>',
minlength: jQuery.format('<span class="help-inline">2 chars</span>')
},
name: {
required: '<span class="help-inline">Name.</span>',
minlength: jQuery.format('<span class="help-inline">2 chars</span>')
},
email: {
required: '<span class="help-inline">Email.</span>',
email: '<span class="help-inline">Ex : name@exemple.com</span>'
},
message: {
required: '<span class="help-block">Message</span>',
minlength: jQuery.format('<span class="help-block">10 chars</span>')
}
},
submitHandler: function(form) //submitHandler is an option taken by the validate function
{
//i put your submission code in here
$('form').submit(function() {
if ($validator.numberOfInvalids() > 0)
{
$('#submit').modal('hide');
} else
{
$('#submit').modal('show');
}
});
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.