Здравствуйте.
У меня есть форма с полями для ввода:
<div id="block">
<form role="form" id="addForm" action="" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter name">
</div>
<div class="form-group">
<label for="birthday">Birthday</label>
<input type="text" class="form-control" id="birthday" required placeholder="Enter birthday">
</div>
<button class="btn btn-success" onclick="addEmpl(this.value)">Add</button>
</form>
</div>
Поле name проверяется с помощью jquery validate:
$("#addForm").validate({
rules:{
name:{
required: true,
minlength: 2,
maxlength: 10,
},
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
messages:{
name:{
required: "This field is required",
minlength: "Name must be at least 2 characters",
maxlength: "Maximum number of characters - 10",
},
}
});
При клике на кнопку Add у меня введенные данные перенаправляются на сервер с помощью ajax.
Возник такой вопрос: как запретить отправку формы, если поле name не прошло валидацию? Сейчас у меня показываются предупреждения, но форма все равно отправляется на сервер. Вызываю ajax через событие onclick.
Заранее спасибо за помощь!