0
Я проверяю форму с помощью плагина jQuery Validate, но каждый раз, когда я отправляю форму, страница перенаправляется на страницу действия. Я не только проверяю форму, но и пытаюсь отправить форму, используя ajax, зная, что форма является бесплатной. Я также использую оповещение bootbox, чтобы показывать ошибки в предупреждениях.jQuery Проверка не работает хорошо
Вот JavaScript файлы я в том числе
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootbox.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
Вот файл custom.js я использовал для пользовательских JS кодирования
$(document).ready(function() {
$(document).ajaxStart(function() {
$(".loadr").show();
$(".send-btn").attr("disabled", "disabled");
$(".send-btn").css("opacity", "0.5");
});
$(document).ajaxComplete(function() {
$(".loadr").hide();
$(".send-btn").removeAttr("disabled", "disabled");
$(".send-btn").css("opacity", "1")
});
contactus();
});
function contactus()
{
var action = $("#CommentForm").attr("action");
$("#CommentForm").validate({
errorElement: "div",
errorClass: "error_message",
rules: {
ContactName: "required",
ContactPhone: "required",
ContactComment: "required",
ContactEmail: {
email: true
}
},
messages: {
ContactName: {
required: "Please enter your Name."
},
ContactPhone: {
required: "Please enter your Phone.",
},
ContactComment: {
required: "Please enter your Message.",
},
},
errorPlacement: function(error, element) {
//error.hide().insertBefore(element.prev()).show("slide", '', 'fast');
},
invalidHandler: function(event, validator) {
var summary = "";
console.log(validator.errorList);
jQuery.each(validator.errorList, function() {
summary += this.message + '<br />' + "\n";
});
alert(summary);
},
onfocusout: function(element) {
$("div.error_message").hide();
},
submitHandler: function(form) {
$('.loadr').show();
$.ajax({
type: "POST",
url: "http://www.mysite.ae/contact.php",
data: $(form).serialize(),
success: function(data) {
$("#CommentForm")[0].reset();
$("#Contactmsgdiv").empty().html('<br /><div class="alert alert-success" style="border: 1px solid;"><strong> Thank you! </strong> We have received your request and will respond shortly!.</div>');
$('.loadr').hide();
}
});
return false;
}
});
}
и здесь HTML-код формы
<form class="progression-contact wpcf7" id="CommentForm" method="post" action="contact.php" novalidate="novalidate">
<fieldset>
<div>
<p><input id="ContactName" name="ContactName" class="textInput" placeholder="Name" /></p>
</div>
<div>
<p><input id="ContactEmail" name="ContactEmail" class="textInput email" placeholder="E-mail" /></p>
</div>
<div>
<p><input id="ContactPhone" name="ContactPhone" class="textInput digits" value="" placeholder="Phone" /></p>
</div>
<div>
<p><textarea id="ContactComment" name="ContactComment" class="textInput" rows="10" cols="4" placeholder="Your Message"></textarea></p>
</div>
<div>
<p><button type="submit" class="progression-contact-submit wpcf7-submit"><span>Send Us Your Message</span></button><img src="http://www.mysite.ae/images/bx_loader.gif" style="margin-left:15px;display:none; " class="loadr"></p>
</div>
</fieldset>
</form>
Если метод '.validate()' не получил вызов в DOM, код, связанный с плагином jQuery Validate, работает отлично: http://jsfiddle.net/kr7sebcw/ – Sparky
До тех пор, пока плагин инициализирован (метод '.validate()'), и вы установили 'submitHandler' (вы это делаете), практически невозможно, чтобы форма обходилась и отправлялась в действие' default'. Даже неважно, что внутри функции 'submitHandler' ... просто включить его в' .validate() 'достаточно, чтобы заблокировать действие' default' по умолчанию. – Sparky
Если вы видите, что плагин validate вызывается в функции contactus, а функция contactus() сама вызывается в DOM ready –