I am using bootstrapValidator.min.js 0.5.3 at this moment to validate a form : https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js
Now this works fine for a contact form where i bind a send mail event to.
But now i want to use it for a form where he needs to validate the form , send the mail and submit the form so i can $_POST get the fields to write it to mysql.
Note also that i have a foreach loop to make more forms when added more objects. (form is used to apply for a job , jobs can be added in the backend.)
The code :
I will not post the form html and PHP because i know they work. Unless asked. Its a really long form and i don't want to clutter this with offtopic code.
Validator :
jQuery('.form-job').each(function (i, obj) {
jQuery(this).bootstrapValidator({
fields: {
firstname: {
validators: {
stringLength: {
min: 2,
message: 'Gelieve 2 of meer letters in te vullen.'
},
notEmpty: {
message: 'Vul aub uw naam in.'
}
}
},
lastname: {
validators: {
stringLength: {
min: 2,
message: 'Gelieve 2 of meer letters in te vullen.'
},
notEmpty: {
message: 'Vul aub uw achternaam in.'
}
}
},
street: {
validators: {
stringLength: {
min: 5,
message: 'Gelieve 5 of meer letters in te vullen.'
},
notEmpty: {
message: 'Vul aub uw straat in.'
}
}
},
housenumber: {
validators: {
stringLength: {
max: 8,
message: 'Vul aub een geldige huisnummer in.'
},
notEmpty: {
message: 'Vul aub uw huisnummer in.'
},
}
},
postal: {
validators: {
stringLength: {
min: 4,
max: 8,
message: 'Vul aub een geldige postcode in.'
},
notEmpty: {
message: 'Vul aub uw postcode in.'
},
}
},
city: {
validators: {
stringLength: {
min: 2,
message: 'Gelieve 2 of meer letters in te vullen.'
},
notEmpty: {
message: 'Vul aub uw stad in.'
}
}
},
country: {
validators: {
stringLength: {
min: 2,
message: 'Gelieve 2 of meer letters in te vullen.'
},
notEmpty: {
message: 'Vul aub uw land in.'
}
}
},
email: {
validators: {
notEmpty: {
message: 'Vul aub uw e-mailadres in.'
},
emailAddress: {
message: 'Vul aub een geldig e-mailadres in.'
}
}
},
telephone: {
validators: {
numeric: {
message: 'Gelieve alleen nummers te gebruiken.',
},
stringLength: {
min: 9,
message: 'Gelieve 9 of meer cijfers in te vullen.'
},
notEmpty: {
message: 'Vul aub een geldig telefoonnummer in.'
}
}
},
motivation: {
validators: {
stringLength: {
min: 10,
max: 550,
message: 'Vul aub minstens meer dan 10 letters in en minder dan 550.'
},
notEmpty: {
message: 'Vul aub uw vraag in.'
}
}
},
cvurl: {
validators: {
file: {
extension: 'doc,docx,pdf,txt',
type: 'application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/txt',
maxSize: 5 * 1024 * 1024, // 5 MB
message: 'Het geselecteerd bestand is niet geldig. Dit moet een .doc, .docx, .pdf of een .txt zijn en max 5 MB groot.'
}
}
}
}
})
.on('success.form.bv', function (e) {
jQuery("#button").css('color', 'green');
jQuery("#button").css('border', '2px solid green');
jQuery(".alert-success").css('display', 'block');
jQuery("#button").html('Verstuurd');
jQuery(this).data('bootstrapValidator').resetForm();
// Prevent form submission
e.preventDefault();
// Get the form instance
var form = jQuery(e.target);
// Get the BootstrapValidator instance
var bv = form.data('bootstrapValidator');
jQuery.post(my_ajax_object.ajax_url, form.serialize());
});
});
Don't mind the dutch please. Anything dutch shouldn't matter to the problem as it is just text that is displayed.
Also i know it says :
// Prevent form submission
e.preventDefault();
But when i delete it or comment it out nothing changes.
So i need it to validate , send the mail (which works) and submit.
Thanks!
So i have made this work.
The problem was that i was trying to get the mail send by ajax trough JS trough the BootstrapValidator.
So what i ended up with was deleting the part that defined anything in the JS and i have this left:
jQuery('.form-job').each(function (i, obj) {
jQuery(this).bootstrapValidator({
fields: {
firstname: {
validators: {
stringLength: {
min: 2,
message: 'Gelieve 2 of meer letters in te vullen.'
},
notEmpty: {
message: 'Vul aub uw naam in.'
}
}
},
lastname: {
validators: {
stringLength: {
min: 2,
message: 'Gelieve 2 of meer letters in te vullen.'
},
notEmpty: {
message: 'Vul aub uw achternaam in.'
}
}
},
street: {
validators: {
stringLength: {
min: 5,
message: 'Gelieve 5 of meer letters in te vullen.'
},
notEmpty: {
message: 'Vul aub uw straat in.'
}
}
},
housenumber: {
validators: {
stringLength: {
max: 8,
message: 'Vul aub een geldige huisnummer in.'
},
notEmpty: {
message: 'Vul aub uw huisnummer in.'
},
}
},
postal: {
validators: {
stringLength: {
min: 4,
max: 8,
message: 'Vul aub een geldige postcode in.'
},
notEmpty: {
message: 'Vul aub uw postcode in.'
},
}
},
city: {
validators: {
stringLength: {
min: 2,
message: 'Gelieve 2 of meer letters in te vullen.'
},
notEmpty: {
message: 'Vul aub uw stad in.'
}
}
},
country: {
validators: {
stringLength: {
min: 2,
message: 'Gelieve 2 of meer letters in te vullen.'
},
notEmpty: {
message: 'Vul aub uw land in.'
}
}
},
email: {
validators: {
notEmpty: {
message: 'Vul aub uw e-mailadres in.'
},
emailAddress: {
message: 'Vul aub een geldig e-mailadres in.'
}
}
},
telephone: {
validators: {
numeric: {
message: 'Gelieve alleen nummers te gebruiken.',
},
stringLength: {
min: 9,
message: 'Gelieve 9 of meer cijfers in te vullen.'
},
notEmpty: {
message: 'Vul aub een geldig telefoonnummer in.'
}
}
},
motivation: {
validators: {
stringLength: {
min: 10,
max: 550,
message: 'Vul aub minstens meer dan 10 letters in en minder dan 550.'
},
notEmpty: {
message: 'Vul aub uw vraag in.'
}
}
},
cvurl: {
validators: {
file: {
extension: 'doc,docx,pdf,txt',
type: 'application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/txt',
maxSize: 5 * 1024 * 1024, // 5 MB
message: 'Het geselecteerd bestand is niet geldig. Dit moet een .doc, .docx, .pdf of een .txt zijn en max 5 MB groot.'
}
}
}
}
})
});
And then i just call a function after the submit button with an
if (isset($_POST['submit'])
(this is an example , never use submit as name of your submit button).
The function that i call sends a mail then and uses a query for the database part