I have the following script, which validate my fields before submitting...validation works, but when the fields are filled...form does not get submitted. I get no error messages in the console, so I guess that from some reason, prevent_default prevents the form to be submitted, even that all fields are filled.
Here is the code:
(function () {
// list all variables used here...
var
conForm = jQuery('#conForm'),
fullname = jQuery('#fullname'),
customeremail = jQuery('#customeremail'),
phone = jQuery('#phone'),
comments = jQuery('#comments');
// funcktion for checking the e-mail address entered by the user
function validateEmail(sEmail) {
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (filter.test(sEmail)) {
return true;
} else {
return false;
}
}
// on exit, check if the user lef the first name emty
fullname.on('blur', function(e){
var tempval = document.getElementById('fullname').value;
if(fullname.val()==''){
//jQuery("#p_username").focus();
jQuery('#fullname').addClass('bordered2');
jQuery('#fullname').removeClass('good_input');
jQuery("#fullname").attr("placeholder", "Εισάγετε το όνομα σας").placeholder();
e.preventDefault();
} else {
jQuery('#fullname').removeClass('bordered2');
}
});
// check if the email entered is valid email address when exit the field
customeremail.on('blur',function(e) {
var sEmail = jQuery('#customeremail').val();
if (jQuery.trim(sEmail).length == 0) {
// if user leave the field empty
//jQuery("#customeremail").focus();
jQuery('#customeremail').removeClass('good_input');
jQuery('#customeremail').addClass('bordered2');
jQuery("#customeremail").attr("placeholder", "Εισάγετε το email σας").placeholder();
e.preventDefault();
}
if (validateEmail(sEmail)) {
// if the e-mail is valid
jQuery('#customeremail').removeClass('bordered2');
jQuery('#customeremail').addClass('good_input');
} else {
// if the e-mail is NOT valid
//jQuery("#customeremail").focus();
jQuery('#customeremail').removeClass('good_input');
jQuery('#customeremail').addClass('bordered2');
sEmail = "";
jQuery("#customeremail").val(sEmail);
jQuery("#customeremail").attr("placeholder", "Εισάγετε υπαρκτό email").placeholder();
e.preventDefault();
}
});
// on exit, check if the user lef the phone emty
phone.on('blur', function(e){
var tempval = document.getElementById('phone').value;
if(phone.val()==''){
//jQuery("#p_username").focus();
jQuery('#phone').addClass('bordered2');
jQuery('#phone').removeClass('good_input');
jQuery("#phone").attr("placeholder", "Εισάγετε το τηλέφωνο σας").placeholder();
e.preventDefault();
} if (tempval.length != 10) {
//jQuery("#p_username").focus();
jQuery('#phone').addClass('bordered2');
jQuery('#phone').removeClass('good_input');
tempval = "";
jQuery("#phone").val(tempval);
jQuery("#phone").attr("placeholder", "Εισάγετε 10 αριθμούς χωρίς κενά").placeholder();
e.preventDefault();
} if(!jQuery.isNumeric(tempval)) {
jQuery('#phone').addClass('bordered2');
jQuery('#phone').removeClass('good_input');
tempval = "";
jQuery("#phone").val(tempval);
jQuery("#phone").attr("placeholder", "Εισάγετε μόνο αριθμούς").placeholder();
}
if (tempval.length == 10) {
jQuery('#phone').removeClass('bordered2');
jQuery('#phone').addClass('good_input');
}
});
// user fill all fields as it should, so form can be submitted
conForm.submit(function(e){
e.preventDefault();
// prevent user from hitting submit button with empty form.
var tempval = document.getElementById('fullname').value;
if(tempval.length ==0){
//jQuery('#p_username').focus();
jQuery('#fullname').addClass('bordered2');
jQuery('#fullname').removeClass('good_input');
jQuery("#fullname").attr("placeholder", "Εισάγετε το όνομα σας").placeholder();
e.preventDefault();
}
var sEmail = jQuery('#customeremail').val();
if (jQuery.trim(sEmail).length == 0) {
// if user leave the field empty
jQuery('#customeremail').removeClass('good_input');
jQuery('#customeremail').addClass('bordered2');
jQuery("#customeremail").attr("placeholder", "Εισάγετε το email σας").placeholder();
e.preventDefault();
}
if (validateEmail(sEmail)) {
// if the e-mail is valid
jQuery('#customeremail').removeClass('bordered2');
jQuery('#customeremail').addClass('good_input');
} else {
// if the e-mail is NOT valid
jQuery('#customeremail').removeClass('good_input');
jQuery('#customeremail').addClass('bordered2');
sEmail = "";
jQuery("#customeremail").val(sEmail);
jQuery("#customeremail").attr("placeholder", "Εισάγετε υπαρκτό email").placeholder();
e.preventDefault();
}
var tempval = document.getElementById('phone').value;
if(tempval.length ==0){
//jQuery('#p_username').focus();
jQuery('#phone').addClass('bordered2');
jQuery('#phone').removeClass('good_input');
jQuery("#phone").attr("placeholder", "Εισάγετε το τηλέφωνο σας").placeholder();
e.preventDefault();
}
//return false;
})
}) ();
Can anyone help me to find out what is wrong with this script?
Regards, John
requiredattribute on the tags? HTML5 will automatically prevent form submission if required fields are blank.