我不是程序员，只是试图修复＆amp;改善我的联系表格。现在它是一个HTML表单（名称，电子邮件，4个复选框作为主题，消息）。和mail.php（update：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>
最初，它显示输入字段旁边的错误消息，我决定不使用它们（在CSS中跨越HTML，“错误”和“errow_show”类中的CSS），只留下输入字段突出显示（“有效”绿色/ “无效的”红色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行）。如果一切都有效并且没有发送任何内容（“禁用按钮”？），如果某些内容无效，我希望我的表单将所有内容发送给我。没有任何提醒。如果它也可能在总结之后保持在同一页面上......那将是理想的事情（Submit form and stay on same page?，Submit a form using jQuery，jQuery AJAX submit form）。任何帮助将不胜感激！:)
更新：表单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;
}
});
我想感谢大家的每一条建议和帮助。
答案 0 :(得分：0)
答案 1 :(得分：0)
如果您希望将其保存，我建议您进行后端验证。
如果在您的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('');
})
}
});
});
答案 2 :(得分：0)
问题：
您看到的行为是因为您删除了代码用于验证/使表单无效的控件。如果没有这些控制，由于它的编写方式，无论输入的实际有效性如何，它都默认为有效状态。
解决方案＃1：
如果您有备份，那么最简单的方法就是在您触摸它之前恢复原来的状态，然后添加隐藏的＆＃39;作为你的跨度的属性。这样他们就不会对您的用户可见，但仍会为您验证输入。
解决方案＃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');
}
});
上面的代码片段循环控件内部的任何输入，其中包含类＆＃39; myform＆＃39;并检查他们是否有有效的＆＃39; class，然后设置变量true或false依赖。如果它检测到存在无效控件，则退出循环并且不继续发布表单。
希望有所帮助。