Попробуйте это.
function validateForm() {
$("#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');
//$(form).validated(function(e){
// alert("Use this call to make AJAX submissions.");
//$(formMessages).addClass('wait').text("You are a human! Click the submit button again to confirm your request.");
$(form).submit(function (e) {
$(formMessages).addClass('wait').text("You are a human! Click the submit button again to confirm your request.");
// Serialize the form data.
$(formMessages).addClass('wait').text("please wait...");
e.preventDefault();
var formData = $(form).serialize();
var action = $(this).attr('action');
$.post(action, $(form).serialize(),
function (data) {
if (data.match('success') != null) $('#ajax-contact .form-group, #ajax-contact .theme-btn').slideUp('slow');
}
)
.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('');
gtag('event', 'form_submission', {
'event_category': 'contact_us',
'event_label': 'success'
});
})
.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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<html>
<form id="ajax-contact" method="post" action="mailer/function/smtpemail.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 onclick='return validateForm()' type="submit" id="submit" class="theme-btn btn-style-four">Submit</button>
</div>
<div id="form-messages"></div>
</form>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
</html>