Javascript jQuery表单：关于提交验证问题+；提交后保持在同一页上

我不是一个程序员，只是想修改和改进我的联系方式。现在它是一个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>

此脚本突出显示空名称、无效电子邮件和空消息。但当我单击“发送”按钮时，脚本尽管突出显示了无效字段，但仍显示“无错误。表单将被sumbit”警报并将表单发送给我问题似乎已到了最后阶段。我不知道如何正确地从这个脚本中删除“span”、“error”和“error_show”（第二个IF之前的3行）。如果所有内容都有效，我希望我的表单将所有内容发送给我，如果某些内容无效，则不发送任何内容（“禁用按钮”）。没有任何警报。如果它也可以在sumbitting后保持在同一页面上。。。这将是一件理想的事情（，）。任何帮助都将不胜感激！：）

更新：表单html：（因不必要而删除）

更新2：伙计们，这（奇怪？不正确？半正确？）代码我突然做了检查，并正确地突出显示为“有效”/“无效”所有3个必填字段（姓名、电子邮件、消息），并显示正确的警报（我稍后将删除它们）在#按钮(u send click)上，甚至可以将整个表单以及非必需的未验证复选框发送给我：

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

---

我要感谢大家给我的每一条建议和帮助

如果您想阻止按钮的默认操作，请在准备好后调用submit

$（“#按钮”）。单击（函数（事件）{
//阻止提交表单
event.preventDefault（）；
var form_data=$（“.myform”）.serializeArray（）；
var error_free=真；
for（表格_数据中的var输入）{
变量元素=$（“#联系人”+表单数据[输入]['name']）；
var valid=element.hasClass（“有效”）；
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”）；}
}
如果（无错误）{
警报（“无错误：将提交表单”）；
//如果没有错误，请提交表格
$（“.myform”）.submit（）；
}
否则{
警报（“显示错误”）；
}
}); 
});

如果要保存，我建议您对其进行后端验证

如果在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('');
                })
            }

        }); 
    });

$（文档）.ready（函数（）{
$（“#联系人姓名”）。在（'input'，function（）上{
var输入=$（此）；
var是_name=input.val（）；
if（is_name）{input.removeClass（“无效”）.addClass（“有效”）；}
else{input.removeClass（“有效”）.addClass（“无效”）；}
});
$（“#联系电子邮件”）。在（'input'，function（）上{
var输入=$（此）；
变量re=/^[a-zA-Z0-9.！$%&'*+/=？^{{124;}-]+@[a-zA-Z0-9-]+（？：\.[a-zA-Z0-9-]+）*$/；
var是_email=re.test（input.val（））；
if（is_email）{input.removeClass（“无效”）.addClass（“有效”）；}
else{input.removeClass（“有效”）.addClass（“无效”）；}
});
$（“#联系信息”）.keyup（函数（事件）{
var输入=$（此）；
var message=$（this.val（）；
控制台日志（消息）；
if（message）{input.removeClass（“无效”）.addClass（“有效”）；}
else{input.removeClass（“有效”）.addClass（“无效”）；}
});
$（“#按钮”）。单击（函数（事件）{
event.preventDefault（）；
var form_data=$（“.myform”）.serializeArray（）；
var error_free=真；
for（表格_数据中的var输入）{
变量元素=$（“#联系人”+表单数据[输入]['name']）；
var valid=element.hasClass（“有效”）；
如果（！有效）{
无错误=错误；
元素addClass（“无效”）；
}                  
}
如果（无错误）{
//提交表格
$.post（{url:'mail.php'，数据：form_data，数据类型：'json'}）.done（函数（）{
//清理田地
$（“[id^=联系人]”）.val（“”）；
})
}
}); 
});

问题：

您看到的行为是因为您删除了代码用于验证/失效表单的控件。如果没有这些控件，由于它的编写方式，无论输入的实际有效性如何，它都默认为有效状态

解决方案#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');
    }               
});

$（“#按钮”）。单击（函数（事件）{
var error_free=错误；
$.each（$（'.myform>input'），function（）{
error_free=$（this）.hasClass（'valid'）；
如果（！无错误）{
event.preventDefault（）；
返回false；
}
});
如果（无错误）{
警报（“无错误：将提交表单”）；
}               
});

上面的代码段在cont中的任何输入上循环

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

        }); 
    });

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