表单验证成功
当我在未填写任何信息的情况下提交表单时,它会迅速显示错误消息,然后消失。如果没有错误消息并且验证成功,我只希望表单褪色。我想我可能需要使用if语句来获得成功,或者需要使用一个提交处理程序?表单验证成功
到目前为止,我有这个 - https://jsfiddle.net/wnmLmcm8/
$(document).ready(function() {
$("form").submit(function (e) {
e.preventDefault();
$.ajax({
type: this.method,
url: this.action,
data: {
name: $('#name').val(),
email: $('#email').val()
},
success: function() {
$('#emailform').fadeOut("slow");
}
});
});
$("form").validate({
rules: {
email: {
required: true,
email: true,
remote: "http://localhost:3000/inputValidator"
}
}
});
});
这是你的jsfiddle的工作版本:https://jsfiddle.net/ywhpdLen/3/
这个片段的作品,基于把你的jsfiddle,但你的jsfiddle不起作用。我必须将代码放到我自己的开发环境中,在本地。
弹出窗口会一直保留到您在文本框中单击。
使用默认的“.validate()”扩展名为输入元素&添加“必需”来完成作业。如果你正在寻找定制它,我会强烈建议看https://jqueryvalidation.org/documentation/
<div id="emailform">
<form method="post" action="form.php">
<hr>
<label for="name">Name</label>
<br>
<input type="text" name="name" id="name" class="NewsLetter1" required/>
<br>
<label for="email">Email</label>
<br>
<input type="text" name="email" id="email" class="NewsLetter2" required/>
<input type="submit" value="Submit">
<hr>
</form>
</div>
<script>
$(document).ready(function() {
$("form").submit(function (e) {
e.preventDefault();
$.ajax({
type: this.method,
url: this.action,
data: {
name: $('#name').val(),
email: $('#email').val()
},
success: function() {
$('#emailform').fadeOut("slow");
},
failure: function (ex) {
}
});
});
$("form").validate();
});
</script>
每注释,如下:它看起来像你的Ajax调用仍然发生和form.submit()被发射了。您可能想要移除您的form.submit()调用,并将其包含在验证调用中,如此。
$("form").validate({
submitHandler:function(form){
$.ajax({....})
}
});
我会测试这不是很多赞赏 – himynameis
唯一的问题是,即使验证失败它仍然消失? www.gavwellis.com尝试一下,我刚更新了它!我使用了你的代码 – himynameis
这是因为你在进行ajax.submit调用之前没有检查表单数据是否有效。你会想看看https://jqueryvalidation.org/valid – Thumper
做它提交处理像...
$(document).ready(function()
{
$("form#sub_form").validate({
rules: {
UserName: "required",
Useremail: {
required: true,
email: true
},
Userpwd:{
required: true,
minlength:8
},
Con_Userpwd:{
required:true,
equalTo:"#reg-pass"
},
contact:{
required:true,
minlength:10
}
},
messages: {
UserName: "Please specify your name",
Useremail: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of [email protected]"
},
Userpwd:{
required: "Enter Your Password",
minlength:"Please Enter minimum 8 digit password"
},
Con_Userpwd: {
required:"Please re-enter your password",
equalTo:"Password not matched"
},
contact:{
required:"Phone Number Required",
minlength:"Minimum 10 Digits Required"
}
},
submitHandler: function(form) {
var msg = $("form#sub_form").serialize();
$.ajax({
type: "POST",
url: "register_checkout.php",
data: msg,
success: function (html) {
$(".popup").delay(5000).fadeOut(1500);
setTimeout(function(){window.location='one-page-checkout.php'},3000);
//return false;
}
else
{
$("#reg_message").slideUp();
$("#reg_message").slideDown().html(html);
}
}
}
);
尝试把你的Ajax到验证插件的submitHandler
$("form").validate({
rules: {
email: {
required: true,
email: true,
remote: "http://localhost:3000/inputValidator"
}
},
submitHandler:function(form){
$.ajax({....})
}
});
当遇到了问题用debug:true
为即时解决方案使用“必需”https://jsfiddle.net/et7qcrye/
<input type="text" name="name" id="name" class="NewsLetter1" required/>
您的输入验证器的外观如何? – Thumper
当我运行它时,提交函数处理程序没有发射。 – Fallenreaper
是的,我一直在努力工作这一点!如果它帮助我的网站“www.gavwellis.com”这个问题是最底层的形式。如果你只是点击提交它确实,但然后只是淡出的 – himynameis