表格不提交

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

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.

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;   
    })

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^^