问题描述
这真是困扰我，任何帮助将不胜感激。我有一个可以正确验证的表单，但是提交时不使用AJAX，而是使用默认表单方法提交。 preventDefault（）无法正常工作。我什至尝试了e.stopImmediatePropagation（），该方法也不起作用。它看起来像一个简单的问题，但是我是Javascript的新手，因此我不确定自己在做什么错。 我正在使用以下
- 3.2.0 jQuery
- 4.5.2 js / bootstrap
- 0.4.5 bootstrapvalidator.min.js
这是我的代码：
$(document).ready(function() {
$('#202496819078063').bootstrapValidator({
// To use Feedback icons,ensure that you use Bootstrap v3.1.0 or later
FeedbackIcons: {
valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'
},fields: {
'q14_yourName[first]': {
validators: {
stringLength: {
min: 2,},notEmpty: {
message: 'Please supply your first name'
}
}
},'q14_yourName[last]': {
validators: {
stringLength: {
min: 2,notEmpty: {
message: 'Please supply your last name'
}
}
},input_17: {
validators: {
stringLength: {
min: 2,notEmpty: {
message: 'Please supply your Business name'
}
}
},q15_yourEmail: {
validators: {
notEmpty: {
message: 'Please supply your email address'
},emailAddress: {
message: 'Please supply a valid email address'
}
}
},q29_phone: {
validators: {
phone: {
country: 'CA',message: 'Please supply a vaild phone number with area code'
}
}
},q18_whatIs: {
validators: {
uri: {
message: 'Please enter a valid URL including http://'
},notEmpty: {
message: 'What is your business website?'
}
}
},state: {
validators: {
notEmpty: {
message: 'Please select your state'
}
}
},zip: {
validators: {
notEmpty: {
message: 'Please supply your zip code'
},zipCode: {
country: 'US',message: 'Please supply a vaild zip code'
}
}
},q20_pleaseTell20: {
validators: {
stringLength: {
min: 10,max: 200,message:'Please enter at least 10 characters and no more than 200'
},notEmpty: {
message: 'Please tells us a bit about your business'
}
}
}
}
})
.on('success.form.bv',function(e) {
$('#success_message').slideDown({ opacity: "show" },"slow") // Do something ...
// $('#202496819078063').data('bootstrapValidator').resetForm();
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
var url = $form.attr('action');
//alert (url);
// Use Ajax to submit form data
$.post($form.attr('action'),$form.serialize(),function(result) {
console.log(result);
},'json');
});
}）;
解决方法
所以我解决了这个情况，以防其他人遇到相同的问题。我不确定为什么这样有效，而不是上面的一个（我是新手），也许有人可以详细说明为什么这样有效或者是更好的方法。无论如何，对我有用的代码是
$('#myform').bootstrapValidator({
message: 'This value is not valid',submitButton: '$user_fact_form button[type="submit"]',submitHandler: function(validator,form,submitButton) {
var purl = $(form).attr("action");
var method = $(this).attr("method");
$.ajax({
type: method,url: purl,data: $(form).serialize(),success: function(result) {
alert('done');
$("#myform").data('bootstrapValidator').resetForm();
}
});
return false;
},feedbackIcons: {
valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'
},fields: {
q29_phone: {
validators: {
phone: {
country: 'CA',message: 'Please supply a vaild phone number with area code'
}
}
},q18_whatIs: {
validators: {
uri: {
message: 'Please enter a valid URL including http://'
},notEmpty: {
message: 'What is your business website?'
}
}
},state: {
validators: {
notEmpty: {
message: 'Please select your state'
}
}
},zip: {
validators: {
notEmpty: {
message: 'Please supply your zip code'
},zipCode: {
country: 'US',message: 'Please supply a vaild zip code'
}
}
},q20_pleaseTell20: {
validators: {
stringLength: {
min: 10,max: 200,message:'Please enter at least 10 characters and no more than 200'
},notEmpty: {
message: 'Please tells us a bit about your business'
}
}
}
}
});
});