Elena Semenchenko Elena Semenchenko - 2 months ago 9
Javascript Question

I have some problems with jquery-validate

I'm trying to do validation form using jquery-validate plugin:



if($(".modalbox").length){
$(".modalbox").fancybox({
fitToView : false,
autoSize : false,
closeClick : false,
maxWidth : 502,
maxHeight : 444,
prevEffect : 'none',
nextEffect : 'none',
padding : 0,
margin : 50,
closeBtn : 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>





console:


form.validate is not a function


But I can not understand the errors and how to fix them. Maybe someone has worked with this plugin.

How can I fix the module to plug breakdowns and breakdowns as expected (if fields are empty, the form is not sent are displayed error field, if everything is in order, the data is sent)?

Answer

"form.validate is not a function" means that the .validate() method is not recognized because you have not included the plugin...

<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>

You've included the additional-methods.js file twice but failed to include the jQuery Validate plugin once.

Should look like this instead...

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.js"></script>