-1
Ich versuche Validierung Form zu tun jquery-validate plugin mit:form.validate ist keine Funktion
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>Konsole:
form.validate ist kein Funktion
Aber ich kann die Fehler nicht verstehen und sie beheben. Vielleicht hat jemand mit diesem Plugin gearbeitet.
Wie kann ich das Modul zu Stecker Pannen und Pannen wie erwartet reparieren (wenn Felder leer sind, das Formular nicht gesendet wird Fehlerfeld angezeigt, wenn alles in Ordnung ist, werden die Daten gesendet)?
Welche Fehler werden Sie bekommen? – Barmar
Warum haben Sie bei der ersten Eingabe zweimal 'data-rule-required =" true "'? – Barmar
korrigiertes Problem – Elena