我有一个简单的 Bootstrap 联系表单，我正在尝试使用 AJAX 和 jQuery 验证来实现它。我觉得我已经很接近了，但有一些事情我无法很好地完成工作。表单根据输入进行验证(理想情况下，我希望将电话号码验证为数字；但是，我是联系表单验证的新手)，但即使答案不正确，联系表单仍会发送。另外，表单提交后总会弹出成功框...我希望如果填写不正确，则不会发送表单，并显示错误框而不是成功框。此外，电子邮件通过消息正文发送，但没有发送任何变量。所以我的邮件正文如下所示:
姓名:
电子邮件:
电话:
留言:
每个后面没有出现变量。
我知道这可能很简单，但我对表单验证还很陌生，我一辈子都无法弄清楚。
以下是表单的 HTML:
<div class="form-group wow fadeInRight" data-wow-delay="1s">
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="name" name="name" placeholder="Name" />
</div>
</div>
</div>
<div class="form-group wow fadeInRight" data-wow-delay="1.1s">
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="email" name="email" placeholder="Email" />
</div>
</div>
</div>
<div class="form-group wow fadeInRight" data-wow-delay="1.2s">
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Phone" />
</div>
</div>
</div>
<div class="form-group wow fadeInRight" data-wow-delay="1.3s">
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea name="message" class="form-control " rows="4" cols="78" placeholder="Enter your message here."></textarea>
</div>
</div>
</div>
<div id="success"></div>
<div class="row wow fadeInUp" data-wow-delay="1.3s">
<div class="form-group col-xs-12">
<div class="contact-btns">
<input type="submit" class="submit-button" value="Submit" name="submit">
<input type="reset" class="clear-buttom" value="Clear" name="clear">
</div>
</div>
</div>
</form>
这是 PHP:
$status = array(
'type' => 'success',
'message' => 'Email sent!'
);
$val = $_POST['val'];
$toemail = 'myemail@gmail.com';
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$msg = $_POST['message'];
$subject = 'Thelliotgroup Information Request';
$headers = "From: Thelliotgroup Website :: " . $email . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = "<b>Name: </b>" . $name . "<br>";
$message .='<b>Email: </b>' . $email . "<br>";
$message .='<b>Phone: </b>' . $phone . "<br>";
$message .='<b>Message: </b>' . $msg;
$success = mail($toemail, $subject, $message, $headers);
echo json_encode($status);
die
这是 AJAX 和 jQuery:
var form = $('.contact');
form.submit(function () {
$this = $(this);
$.post($(this).attr('action'), function (data) {
$this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
}, 'json');
return false;
});
$.validator.setDefaults({
submitHandler: function (form) {
$.ajax({
type: "POST",
url: "email.php",
data: {'val': $(".contact").serializeJSON()}
}).done(function (data) {
alert(data);
});
}
});
$(".contact").validate(
{rules:
{name: "required",
email: {required: true, email: true},
phone: "required",
message: {required: true, maxlength: 300
}},
errorClass: "error",
highlight: function (label) {
$(label).closest('.form-group').removeClass('has-success').addClass('has-error');
},
success: function (label) {
label
//.text('Seems Perfect!').addClass('valid')
.closest('.form-group').addClass('has-success');
}
});
我非常感谢你们为我提供的任何帮助，让我能够正常工作。
编辑 以下是新的 jQuery 和 AJAX 代码:
$(document).ready(function() {
var form = $(this);
var post_url = form.attr('action');
$('.contact').validate({
rules: {
name: {
rangelength: [2,40],
required: true
},
email: {
rangelength: [2,40],
email: true,
required: true
},
phone: {
rangelength: [7,10],
required: true
},
message: {
minlength: 30,
required: true
},
errorClass:"error",
highlight: function(label) {
$(label).closest('.form-group').removeClass('has-success').addClass('has-error');
},
success: function(label) {
label
.closest('.form-group').addClass('has-success');
}
},
submitHandler: function(form) {
$.ajax({
type: 'POST',
url: 'email.php',
data: $(form).serialize(),
success: function(msg) {
$('.sent').fadeIn().fadeOut(5000);
}
});
return false;
}
});
});
现在我只需要弄清楚如何做到这一点:
<div class="status alert alert-success" style="display: none"></div>
它位于表单正上方，提交表单后就会淡出。 我无法让它工作。
谢谢， 布伦南
最佳答案
我不明白为什么你在 jQuery submit 处理函数中执行 .post() (ajax)，而同时又 .ajax() 位于插件的 submitHandler 函数内。我不明白。为什么要使用 ajax 两次？
我认为最好删除整个功能...
form.submit(function () {
$this = $(this);
$.post($(this).attr('action'), function(data) {
$this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
},'json');
return false;
});
因为它干扰了插件的 submitHandler 功能。
当表单有效时，使用submitHandler在按钮click上触发代码。 This is where any ajax would belong .
编辑:
您已将 errorClass、highlight 和 success 内 规则选项...
rules: {
name: {
....
},
email: {
....
},
phone: {
....
},
message: {
....
},
errorClass:"error",
highlight: function(label) {
....
},
success: function(label) {
....
}
},
这是错误的。 errorClass、highlight 和 success 是 rules 和 submitHandler 的兄弟 选项。
此外，在使用 highlight 时，最好同时使用 unhighlight 来撤消使用 highlight 所做的任何操作。
rules: {
// only your rules here
},
errorClass:"error",
highlight: function(element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').addClass('has-success').removeClass('has-error');
},
submitHandler: function(form) {
$.ajax({
// your options
});
return false;
}
用于清除 Ajax success 选项中的表单...
$('#myform').validate().resetForm(); // reset validation
form[0].reset(); // clear out the form data
关于javascript - 使用 jQuery 验证和 AJAX 的 Bootstrap 联系表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28208388/