jQuery表單：關於提交驗證問題+提交后留在同一頁面上

Question

我不是程序員，只是試圖修復和改進我的聯系表。 現在，它是一個HTML表單（名稱，電子郵件，4個復選框作為主題，消息）。 和mail.php（更新：method =“ POST”）。 一切正常，我收到所有表格數據。

但是我發現了一個腳本來驗證名稱，電子郵件和消息輸入，這里是：

<script>
        $(document).ready(function() {
            <!-- Real-time Validation -->
            <!--Name can't be blank-->
            $('#contact_name').on('input', function() {
                var input=$(this);
                var is_name=input.val();
                if(is_name){input.removeClass("invalid").addClass("valid");}
                else{input.removeClass("valid").addClass("invalid");}
            });

            <!--Email must be an email -->
            $('#contact_email').on('input', function() {
                var input=$(this);
                var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
                var is_email=re.test(input.val());
                if(is_email){input.removeClass("invalid").addClass("valid");}
                else{input.removeClass("valid").addClass("invalid");}
            });

            <!--Message can't be blank -->
            $('#contact_message').keyup(function(event) {
                var input=$(this);
                var message=$(this).val();
                console.log(message);
                if(message){input.removeClass("invalid").addClass("valid");}
                else{input.removeClass("valid").addClass("invalid");}   
            });

            <!-- After Form Submitted Validation-->
            $("#button").click(function(event){
                var form_data=$(".myform").serializeArray();
                var error_free=true;
                for (var input in form_data){
                    var element=$("#contact_"+form_data[input]['name']);
                    var valid=element.hasClass("valid");
                    var error_element=$("span", element.parent());
                    if (!valid){error_element.removeClass("error").addClass("error_show"); error_free=false;}
                    else{error_element.removeClass("error_show").addClass("error");}
                }
                if (!error_free){
                    event.preventDefault(); 
                }
                else{
                    alert('No errors: Form will be submitted');
                }
            }); 
        });
</script>

最初，它是在輸入字段旁邊顯示錯誤消息，所以我決定不使用它們（HTML中的跨度，CSS中的“錯誤”和“ errow_show”類），僅將輸入字段突出顯示（“有效”為綠色/“無效”為紅色） CSS類）。

我覺得問題是這些行：

var error_element=$("span", element.parent());
if (!valid){error_element.removeClass("error").addClass("error_show"); error_free=false;}
else{error_element.removeClass("error_show").addClass("error");}

並且此腳本突出顯示了空名稱，無效的電子郵件和空消息。 但是，當我單擊“發送”按鈕時，該腳本盡管突出顯示了無效字段，但仍顯示警報“沒有錯誤。表格將被加總”並將表格發送給我。 問題似乎在最后一部分。 我不知道如何從該腳本中正確刪除“ span”，“ error”和“ error_show”（第二個IF之前的3行）。 我希望表單在所有內容都有效的情況下將所有內容發送給我，而在某些內容無效的情況下不發送任何內容（“禁用按鈕”？）。 沒有任何警報。 如果求和后還可以留在同一頁上……那將是理想的選擇（ 提交表單並留在同一頁上？ ， 使用jQuery提交表單，使用 jQuery AJAX提交表單 ）。 任何幫助將不勝感激！：）

更新 ：表單html：（現在已刪除為不必要的內容）

更新2 ：好的，伙計們，這個（奇怪的？不正確的？半正確的？）代碼突然組成了檢查，並正確地將所有3個必填字段（名稱，電子郵件，消息）突出顯示為“有效” /“無效”，並顯示正確的警報（我將在以后刪除它們）在#button_send單擊上，甚至將帶有不需要的未經驗證的復選框的整個表單發送給我：

$('#button_send').click(function(){
if ($('#contact_name').hasClass('valid') && $('#contact_email').hasClass('valid') && $('#contact_message').hasClass('valid')) {
                    alert('No errors');
                    $('.form').submit();
                } else {
                    alert('Errors');
                    return false;
                }
            });

我要感謝每個人的建議和幫助 。

Answer 1

您要阻止按鈕的默認操作，然后在准備好后調用Submit。

http://api.jquery.com/event.preventDefault/

        <!-- After Form Submitted Validation-->
        $("#button").click(function(event){
            // prevent the form from being submitted
            event.preventDefault();

            var form_data=$(".myform").serializeArray();
            var error_free=true;
            for (var input in form_data){
                var element=$("#contact_"+form_data[input]['name']);
                var valid=element.hasClass("valid");
                var error_element=$("span", element.parent());
                if (!valid){error_element.removeClass("error").addClass("error_show"); error_free=false;}
                else{error_element.removeClass("error_show").addClass("error");}
            }
            if (error_free) {
                alert('No errors: Form will be submitted');
                // submit the form if no errors
                $( ".myform" ).submit(); 
            }
            else{
                alert('Errors shown');
            }
        }); 
    });

Answer 2

如果要保存它，建議您進行后端驗證。

如果在您的HTML表單中，該方法設置為“ post”，則將發揮作用；

    $(document).ready(function() {
        <!-- Real-time Validation -->
        <!--Name cant be blank-->
        $("#contact_name").on('input', function() {
            var input=$(this);
            var is_name=input.val();
            if(is_name){input.removeClass("invalid").addClass("valid");}
            else{input.removeClass("valid").addClass("invalid");}
        });

        <!--Email must be an email -->
        $("#contact_email").on('input', function() {
            var input=$(this);
            var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
            var is_email=re.test(input.val());
            if(is_email){input.removeClass("invalid").addClass("valid");}
            else{input.removeClass("valid").addClass("invalid");}
        });

        <!--Message cant be blank -->
        $("#contact_message").keyup(function(event) {
            var input=$(this);
            var message=$(this).val();
            console.log(message);
            if(message){input.removeClass("invalid").addClass("valid");}
            else{input.removeClass("valid").addClass("invalid");}   
        });

        <!-- After Form Submitted Validation-->
        $("#button").click(function(event){
            event.preventDefault();
            var form_data=$(".myform").serializeArray();
            var error_free=true;
            for (var input in form_data){
                var element = $("#contact_"+form_data[input]['name']);
                var valid = element.hasClass("valid");
                if (!valid){
                    error_free=false;
                    element.addClass("invalid");
                }                  
            }
            if (error_free){
                //Submit the  form
                $.post({url: 'mail.php', data: form_data, dataType: 'json'}).done(function(){
                    //clear the fields
                    $("[id^=contact_]").val('');
                })
            }

        }); 
    });

Answer 3

問題：

您看到的行為是因為您刪除了代碼用來驗證/使表單無效的控件。 如果沒有這些控件，則由於其編寫方式，無論輸入的實際有效性如何，它都默認為有效狀態。

解決方案1：

如果您有備份，那么要做的一件簡單的事情就是恢復到觸摸之前的狀態，然后將“隱藏”作為屬性添加到跨度中。 這樣，它們對您的用戶將不可見，但仍會為您驗證輸入。

解決方案2：

如果您無法執行此操作，則需要修改提交代碼以驗證其余控件及其類。 我沒有完整的代碼來測試這一點，但是我相信類似的東西會起作用：

<!-- After Form Submitted Validation-->
$("#button").click(function(event){
    var error_free=false;
    $.each($('.myform > input'), function() {
        error_free = $(this).hasClass('valid');
        if (!error_free){
            event.preventDefault();
            return false;
        }
    });
    if (error_free){
      alert('No errors: Form will be submitted');
    }               
});

上面的代碼片段循環使用類“ myform”對控件內部的所有輸入進行循環，並檢查它們是否具有“ valid”類，然后根據變量設置true或false。 如果它檢測到存在無效的控件，則退出循環並且不繼續發布表單。

希望能有所幫助。