我正在使用jQuery bootstrapValidator插件来验证表单并处理表单。验证似乎正在起作用,但是submitHandler内部的ajax调用不起作用。为了简化我将php文件放在与联系表单相同的目录中,并让它回显一条消息。
当您点击提交按钮时,页面只会重新加载。
这是html:
<form id="form" method="post" class="contact-form">
<div class="form-group">
<label class=" control-label">First Name</label>
<input type="text" class="form-control" name="firstName" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input type="text" class="form-control" name="lastName" />
</div>
<div class="form-group">
<label class="control-label">Company Name</label>
<input type="text" class="form-control" name="company" />
</div>
<div class="form-group">
<label class="control-label">Phone </label>
<input type="text" class="form-control" name="lastName" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
</div>
</form>
这是javascript:
$('#form').bootstrapValidator({
message: 'This value is not valid',
live: 'enabled',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitHandler: function(validator, form, submitButton) {
//alert("made it to submit handler block!");
$.ajax({
type: "POST",
url: "process.php",
data: $('#form').serialize(),
success: function(msg){
alert("made it to success block!");
alert(msg);
},
error: function(){
alert("We found an error in your data. Please return to home page and try again.");
}
});//close ajax
},
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
},
lastName: {
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
}
}
},
} // end field
});// bootstrapValidator
这是一个演示 http://aaronhaas.com/waterford/contact.html
非常感谢任何帮助 谢谢,
亚伦