表格不提交

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的回答会更好，更容易做到^^