form does nothing on submit

Question

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

• iCollect.it Ltd: Suggest you breakpoint your code in the F12 debugger of Chrome (or similar tool). Make this a habit as it will be educational :) Failing that, please post your code with suitable HTML in a JSFiddle.
• Justinas: Are you returning true after successful validation? If not, then form is not submitted (same as returning false)
• user2417624: i add return true bellow of the commented line return false on the end of the script, but nothing...form is not submitted.

Answer 1

The very first line in your submit() function is e.preventDefault();, which stops the form from following along it's natural submit logic, but you don't have any code in there to ever trigger the submit if the form passes validation.

I'd remove the first instance of e.preventDefault(); and introduce a validation flag that defaults to true. Replace all of the other instances of e.preventDefault(); with a line that sets the flag to false and then return the flag at the end of the code.

Like this:

// user fill all fields as it should, so form can be submitted
conForm.submit(function(e){ 
 var isValidForm = true;
 // 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", "Εισάγετε το όνομα σας");
 isValidForm = false;
 }
 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 σας");
 isValidForm = false;
 }
 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");
 isValidForm = false;
 }
 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", "Εισάγετε το τηλέφωνο σας");
 isValidForm = false;
 }
 return isValidForm; 
})

UPDATE: Removed the .placeholder() code that was breaking the logic.

• user2417624: removing that line, submit blank form...it display the placeholder in the first field brifly and then submit the form...
• talemyn: I updated my answer with a full solution . . . use a flag to track the "valid" state and return the flag at the end of the function.
• user2417624: i just test it...form is not beeing submitted.
• talemyn: Give me a second to look through the rest of your code . . . the "return true/return false" approach works (I've used it many times), so something else must be stopping the logic.
• user2417624: i hope that you will manage to find something..i am running out of ideas

Answer 2

I think the issue is the initial e.preventdefault within your submit event. Please try the code below.

// user fill all fields as it should, so form can be submitted
 conForm.submit(function(e){ 
 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; 
 })

• user2417624: removing that line, submit blank form...it display the placeholder in the first field brifly and then submit the form...
• Bic: @user2417624 Have you tried just using the required attribute on the tags? HTML5 will automatically prevent form submission if required fields are blank.
• stead: Not sure i follow what is occurring now. Please add debugger; to the beginning of your submit function and try stepping through to catch the exact line causing issues. My guess is that one of your IDs does not match your jquery call to retrieve the element which is causing the validation to fail.

Answer 3

That's exactly what preventDefault(); is for!

Try to use preventDefault on the submit button, check what ever you want to check and then submit the form with jQuery('#conForm').submit();

For more information check https://api.jquery.com/submit/.

EDIT: talemyn answer is better and easier to do if I didn't overlook any mistakes^^

• user2417624: i add jQuery('#conForm').submit(); bellow of the commented return false line, but still nothing...form has not been submited.
• Bic: @Ekusu If you retrigger the submit within submit handler, it will still hit the submit handler and preventDefault. You have to some sort of global flag to use this method.
• Ekusu: Yeah i noticed too that something is wrong with my answer, that's why I added that someone else's answer is better^^ Thx for the tip Bic EDIT: Just noticed that my answer actually wouldn't do what he probably wanted. It wont submit or check anything if you press enter