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>最初，它在输入字段旁边显示错误消息，我决定不使用它们( HTML中的span，CSS中的" error“和"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");}此脚本突出显示空名称、无效电子邮件和空消息。但是当我点击"SEND“按钮时，尽管高亮显示了无效字段，脚本还是显示了警告"No errors。Form will be sumbitted”，并将表单发送给我。问题似乎在它的最后一部分。我不知道如何正确删除此脚本中的"span“、"error”和"error_show“(第二个IF前3行)。我希望我的表单将所有内容发送给我，如果所有内容都有效，而不发送任何内容(“禁用按钮”？)如果某些东西是无效的。没有任何警告。如果它也可以在求和后停留在同一页上...这将是一个理想的东西(Submit form and stay on same page?、Submit a form using jQuery、jQuery AJAX submit form)。任何帮助都将不胜感激！：)
更新：form html：(现在删除为不必要)
UPDATE 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;
}
});我想要感谢每个人的每一条建议和帮助。
回答 3
Stack Overflow用户
发布于 2018-06-01 22:52:15
您希望阻止按钮的默认操作，然后在准备好时调用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');
}
});
});Stack Overflow用户
发布于 2018-06-01 23:02:19
如果你想保存它，我建议你做后端验证。
如果在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('');
})
}
});
});Stack Overflow用户
发布于 2018-06-02 01:16:19
The Problem:
您看到的行为是因为您删除了代码用来验证/使表单无效的控件。如果没有这些控件，由于它的编写方式，它将默认为有效状态，而不考虑输入的实际有效性。
解决方案#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。如果它检测到有一个无效的控件，它就会退出循环，并且不会继续发送表单。
希望这能有所帮助。
https://stackoverflow.com/questions/50645917
复制相似问题