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();的第一个实例，并引入默认为true的验证标志。将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（）;是为了！

尝试在提交按钮上使用preventDefault，检查您要检查的内容，然后使用jQuery('#conForm').submit();

提交表单

有关详细信息，请查看https://api.jquery.com/submit/。

编辑：如果我没有忽视任何错误，talemyn的答案会更好，更容易做到^^

表单在提交时没有任何作用

3 个答案: