-1
我試圖用jquery-validate plugin做驗證形式：form.validate不是函數
if($(".modalbox").length){
$(".modalbox").fancybox({
fitToView : false,
autoSize : false,
closeClick : false,
maxWidth : 502,
maxHeight : 444,
prevEffect \t \t : 'none',
nextEffect \t \t : 'none',
padding : 0,
margin : 50,
closeBtn \t \t : false,
helpers : {
overlay : {
css : {
'background' : 'rgba(0, 0, 0, 0.72)'
}
},
}
});
}
// Callback forms
(function(){
var app = {
init: function(){
this.setUpListeners();
},
setUpListeners: function(){
$(document).on('submit', 'form', this.submitForm);
$(document).on('keyup', 'input', this.removeError);
},
submitForm: function(e){
e.preventDefault();
var form = $(this),
btnSubmit = form.find('[type="submit"]');
//if(app.validateForm(form) === false) return false;
form.validate({
invalidHandler: function(event, validator){
var errors = validator.numberOfInvalids();
if (errors) {
return false;
btnSubmit.attr('disabled', 'disabled');
console.log('false');
} else {
console.log('valide');
}
}
});
btnSubmit.attr('disabled', 'disabled');
var str = form.serialize();
$.ajax({
url: 'contacts.php',
type: 'post',
data: str
}).done(function(msg){
if(msg === "OK"){
var res = "<div class=\"alert alert-success\" role=\"alert\"> <strong>Well done!</strong> You successfully read this important alert message. </div>";
$(".fancybox").html(res);
setTimeout(function(){
$.fancybox.close();
}, 2000)
console.log('ok');
$(".fancybox").fancybox().trigger('click');
}else {
$(".fancybox").html(msg);
$(".fancybox").fancybox().trigger('click');
}
}).always(function(){
btnSubmit.removeAttr('disabled', '');
});
},
validateForm: function(form){
var inputs = form.find('input'),
valid = true;
// $.each(inputs, function(i, val){
// var input = $(val),
// val = input.val(),
// formGroup = input.closest('.form-row');
// if(val.length === 0){
// formGroup.addClass('has-danger');
// valid = false;
// } else {
// formGroup.addClass('has-success').removeClass('has-danger');
// }
// });
// return valid;
},
removeError: function(){
var $this = $(this),
formGroup = $this.closest('.form-group');
formGroup.removeClass('has-danger');
}
}
app.init();
})();.callback-modal {
display: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.js"></script>
</head>
<body>
<div class="wrap">
<a href="#request" class="modalbox">Оформить заявку</a>
<div id="request" class="callback-modal">
<div class="callback-modal__inner">
<form class="callback__form" id="callbackForm">
<div class="form-row">
<input type="text" name="name" id="r-name" placeholder="Имя" class="input" data-rule-required="true">
</div>
<div class="form-row">
<input type="text" name="phone" id="r-phone" placeholder="Телефон" class="input" data-rule-required="true" data-rule-minlength="5">
</div>
<div class="form-row">
<input type="text" name="email" id="r-email" placeholder="E-mail" class="input" data-rule-required="true" data-rule-email="true">
</div>
<div class="form-row">
<textarea name="msg" id="r-msg" placeholder="Описание сайта" class="input"></textarea>
</div>
<input type="submit" value="Отправить" class="btn btn__submit">
<div class="fancybox"></div>
</form>
</div>
</div>
</div>
</body>
</html>控制檯：
form.validate不是功能
但我無法理解錯誤以及如何解決它們。也許有人已經使用這個插件。
如何修復模塊以按預期方式插入故障和故障（如果字段爲空，表單未發送顯示錯誤字段，如果一切正常，數據發送）？
你得到什麼錯誤？ – Barmar
爲什麼在第一個輸入中有兩次'data-rule-required =「true」'？ – Barmar
已更正的問題 – Elena