表格不提交

Question

我有以下腳本，該腳本在提交之前驗證我的字段...驗證有效，但是當字段被填充時...表單未提交。 我在控制台中沒有收到任何錯誤消息，因此我猜測由於某種原因，prevent_default阻止了表單的提交，即使所有字段都已填寫。

這是代碼：

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


}) ();

誰能幫我找出此腳本出了什么問題？

問候，約翰

Answer 1

在你的第一行submit()函數是e.preventDefault(); ，這阻止了表單遵循其自然的提交邏輯，但是如果表單通過驗證，則其中沒有任何代碼可以觸發提交。

我將刪除e.preventDefault();的第一個實例e.preventDefault(); 並引入一個默認為true的驗證標志。 替換所有其他e.preventDefault();實例e.preventDefault(); 用一行將標志設置為false ，然后在代碼末尾返回標志。

像這樣：

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

更新：刪除了破壞邏輯的.placeholder()代碼。

Answer 2

我認為問題是您提交事件中的初始e.preventdefault。 請嘗試下面的代碼。

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

這就是preventDefault（）;的確切含義。 是為了！

嘗試在Submit按鈕上使用preventDefault，檢查您要檢查的內容，然后使用jQuery('#conForm').submit();

有關更多信息，請檢查https://api.jquery.com/submit/ 。

編輯：如果我不忽略任何錯誤，talemyn的回答會更好，更容易做到^^