我不是一个程序员,只是试图修复和改善我的联系方式。现在它是一个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;
}
});
我想要感谢每个人的每一条建议和帮助。
发布于 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');
}
});
});
发布于 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('');
})
}
});
});
发布于 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
复制相似问题