При нажатии на кнопку форма должна пройти валидацию и отправиться на сервер. Валидация работает, а вот с отправкой формы проблема - нет запроса на сервер. HTML:
<form method="POST" action="javascript:void(null);" id="form">
<input class="form form_name" type="text" name="name" required=""
placeholder="Type your name">
<input class="form form_" type="text" name="secondname" required=""
placeholder="Type your secondname">
<input class="form form_" type="email" name="email" placeholder="Type your e-mail">
<select class="form form_select" name="gender" required="">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<input class="form form_" type="password" name="pass" placeholder="Type your password">
<p class="form__p"><input class="form form_checkbox" type="checkbox" name="check" value="ok" required="">Sith Code</p>
<div id="result" class="form__answer"></div>
<button type="button" class="form form_submit" id="submit">Send</button>
</form>
JS:
jQuery.validator.setDefaults({
debug: true,
success: "val"
});
var form = $( "#form" );
$(document).ready(function(){
$("#form").validate({
rules:{
name:{
required: true,
minlength: 3,
maxlength: 20,
},
secondname:{
required: true,
minlength: 6,
maxlength: 20,
},
email:{
required: true,
email: true,
},
gender:{
required: true,
},
pass:{
required: true,
minlength: 6,
maxlength: 10,
},
checkbox:{
required: true,
},
}
});
$( "button" ).click(function() {
if(form.val()) {
var msg = $("#form").serialize();
console.log(msg);
$.ajax({
type: 'POST',
url: 'http://codeit.pro/frontTestTask/user/registration',
data: msg,
success: function(data) {
console.log(data);
if (data.status === 'OK') {window.location.href='second_page.html'}
else {alert(data.message)};
}
});
};
});
});
Проблема в этих двух строках:
$( "button" ).click(function() {
if(form.val()) {
Вместо прослушивания кнопки рекомендую слушать форму на событие submit
. А также вопрос - откуда у формы взялся метод .val()
, который возвращает значение поля ввода? У формы такого поведения нет.
Вместо этих двух строк следует сделать так:
$(document).on('submit', form, function(e){
e.preventDefault(); // чтобы форма не отправилась по умолчанию
var data = form.serialize();
// и дальше код отправки запроса по аякс
});
Событие submit
срабатывает при любой попытке отправить форму. А поскольку уже есть работающий валидатор, то он не должен пропустить до события submit
, пока форма не пройдет валидацию.
И еще поменять
<button type="button" class="form form_submit" id="submit">Send</button>
на
<button type="submit" class="form form_submit" id="submit">Send</button>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Какие существуют виды рекламных бордов и как выбрать подходящий?
Не срабатывает JS (не выводиться сообщение "back") если выдвинута клавиатура и нажимаем "назад"Срабатывает со второго нажатия - когда клавиатура...
Как реализовать, чтоб при скролле до определенной секции, на фоне секции из одного угла в другой к примеру плавно выстреливали полоскиВидел...
У меня есть код на анимацию увеличения цифр от 0 до 100Как сделать чтобы когда число доходило до 100 происходила анимация уменьшения чисел обратно...