如何修复Ajax表单重定向到邮件页面

时间:2019-01-28 11:00:01

标签: jquery html ajax forms phpmailer

我正在开发html页面中的contactus表单,验证工作正常,此代码无需验证即可工作,验证后无法正常工作,但是页面重定向到mailer.php,AJAX无法正常工作,我一直尝试但没有用我怎样才能解决这个问题?任何建议,高度赞赏。

HTML

<form  id="ajax-contact" method="post" action="mailer.php"  class="wpcf7-form AdvancedForm" autocomplete="on">
<div class="form-group">
<input  id="cname" type="text" name="cname" value="" placeholder="NAME">
</div>
<div class="form-group">
<input id="cemail" type="email" data-missing="This field is required" data-mismatch="Please include a valid email"  name="cemail" value="" placeholder="EMAIL">
</div>
<div class="form-group">
<input id="cnumber" type="text" maxlength="15" name="cnumber" value="" placeholder="MOBILE">
</div>
<div class="form-group">
<input id="csubject" type="text" name="csubject" value="" placeholder="SUBJECT">
</div>
<div class="form-group">
<textarea id="cmessage" draggable="false" name="cmessage" placeholder="YOUR MESSAGE"></textarea>
</div>

<div class="form-group">
<button type="submit" id="submit" class="theme-btn btn-style-four">Submit</button>
</div>
<div id="form-messages"></div>
</form>

这是用于验证和Ajax条件的Jquery。

JavaScript

<script type="text/javascript">
$(function(){
$("#cname").validate({
expression: "if (VAL) return true; else return false;",
message: "Please enter the Name"
});
$("#cnumber").validate({
expression: "if (VAL.match(/^[0-9\.\-\/]+$/)) return true; else return false;",
message: "Please enter a valid Phone number"
}); 
$("#csubject").validate({
expression: "if (VAL) return true; else return false;",
message: "Please enter the Subject"
});
$("#cemail").validate({
expression: "if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;",
message: "Please enter a valid Email ID"
});
$("#cmessage").validate({
expression: "if (VAL) return true; else return false;",
message: "Please enter the Message"
});

// Get the form.
var form = $('#ajax-contact');

// Get the messages div.
var formMessages = $('#form-messages');

$('.AdvancedForm').validated(function(e){
// alert("Use this call to make AJAX submissions.");

// Stop the browser from submitting the form.
e.preventDefault();

// Serialize the form data.
$(formMessages).addClass('wait').text("please wait...");


var formData = $(form).serialize();

console.log($(form).attr('action'));
console.log(formData);

// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');

// Set the message text.
$(formMessages).text(response);

// Clear the form.
$('#cname').val('');
$('#cemail').val('');
$('#cnumber').val('');
$('#csubject').val('');
$('#cmessage').val('');

})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');

// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
});
</script>

1 个答案:

答案 0 :(得分:0)

您可以将验证规则封装在一个函数中,以便如果一切正常,则该函数应返回true,然后使用if语句进行测试,例如

def read_cmdline_args():
    parser = argparse.ArgumentParser()
    parser.add_argument("-l", "--search_by_name", help="Search by name", 
     type=str, nargs='+')
    args = parser.parse_args()
    return args

cmdline_args = read_cmdline_args()
uSerach_by_name = cmdline_args.serach_by_name

session.serach_by_name(tags=uSerach_by_name, amount=uSerach_by_name)