引导验证不适用于表单提交
Bootstrap validation not working on form submission
所以我是引导程序的新手,到目前为止,我已经按照我想要的方式工作了。我创建了一个使用模态表单的联系表单,并使用邮件功能通过PHP发送电子邮件。
我创建了一个脚本来对表单进行验证。如果验证通过,我希望发送电子邮件。
目前,当用户提交空白表单时,验证不起作用,并且正在发送电子邮件。
请记住,我是使用引导程序的新手。
.HTML
<div id="ContactUs" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h4 class="modal-title" id="myModalLabel">Contact Us</h4>
<p><b>XXXX</b><br>
Company Phone: XXXXX
</p>
</div>
<form id="contactForm" method="post" action="scripts/email.php">
<div class="modal-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Please enter your full name here.">
<label for="name">Email</label>
<input type="text" name="email" id="email" class="form-control" placeholder="Please enter your email address here.">
<label for="name">Subject</label>
<input type="text" name="subject" id="subject" class="form-control" placeholder="Please enter your subject here.">
<label for="message">Message</label>
<textarea name="message" class="form-control" placeholder="Please enter your message here."></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
脚本
$(document).ready(function()
{
$validator = $("#contactForm").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: {
name: {
required: true,
minlength: 2
},
subject: {
required: true,
minlength: 10
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 10
}
},
messages: {
name: {
required: '<span class="help-inline">Your name is required</span>',
minlength: jQuery.format('<span class="help-inline">2 chars</span>')
},
subject: {
required: '<span class="help-inline">A Subject is required.
</span>',
minlength:jQuery.format('<span class="help-inline">10 characters</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)
{
$('form').submit(function() {
if ($validator.numberOfInvalids() > 0)
{
$('#submit').modal('hide');
} else
{
$('#submit').modal('show');
}
});
}
});
});
在每个输入字段中添加"必需"。确保每个字段都有数据的简单方法
<form id="contactForm" method="post" action="scripts/email.php">
<div class="modal-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Please enter your full name here." required />
<label for="name">Email</label>
<input type="text" name="email" id="email" class="form-control" placeholder="Please enter your email address here." required />
<label for="name">Subject</label>
<input type="text" name="subject" id="subject" class="form-control" placeholder="Please enter your subject here." required />
<label for="message">Message</label>
<textarea name="message" class="form-control" placeholder="Please enter your message here." required /></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
你已经包含了jquery和验证库吗?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
将
表单传递给带有属性的按钮 <button type="submit" class="btn btn-primary" form="ContactUs">Submit</button>
您应该将您的表单ID放入其中
相关文章:
- HTML表单提交时未执行外部函数
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 将图像上传ajax与表单提交ajax相结合
- Javascript无法处理表单提交
- 如何在我的情况下禁用表单提交
- 加载后的页面与ajax表单提交不起作用
- angularjs-控制器在表单提交时未调用
- 禁用带有字符白名单的表单提交
- 如何使用Google Analytics跟踪表单提交
- 使用javascript将表单提交到iframe目标中
- e.preventDefault在表单提交时被忽略
- AngularJS JQuery Ajax表单提交等效
- JavaScript表单提交帮助
- PHP表单提交和重定向
- 当所有输入文本字段都为空时,禁止表单提交,但当jquery中的任何字段不为空时允许提交
- setTimeOut AFTER jQuery表单提交
- ASP MVC jQuery验证专注于工作,但不专注于表单提交
- jQueryAjax请求仅适用于单个表单提交
- ajax表单提交重定向类似于非ajax表单
- Jquery - info/docs关于适用于表单中不同类型输入元素的属性列表