This is has been really plaguing me and any help would be greatly appreciated. I have a form that validates correctly but on submit it doesnt use AJAX , instead submits using default form method. The preventDefault() is not working. I even tried e.stopImmediatePropagation(), that did not work either. It looks like a simple problem, but I am a newbie to Javascript and i am not sure what i am doing wrong here. I am using the following
- 3.2.0 jquery
- 4.5.2 js/bootstrap
- 0.4.5 bootstrapvalidator.min.js
Here is my Code:
$(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');
});
});
So i Solved this in case someone else has the same issue. I am not sure why this works and not the one above ( I am a newbie), maybe someone can elaborate why this works or is a better approach. Anyhow the code that worked for me is