Отправка формы, AJAX POST

252
18 сентября 2017, 05:28

При нажатии на кнопку форма должна пройти валидацию и отправиться на сервер. Валидация работает, а вот с отправкой формы проблема - нет запроса на сервер. 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)};
              }
            });
        };
    });
});
Answer 1

Проблема в этих двух строках:

    $( "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>
READ ALSO
Tizen. Работа JS при нажатии &ldquo;Назад&rdquo;

Tizen. Работа JS при нажатии “Назад”

Не срабатывает JS (не выводиться сообщение "back") если выдвинута клавиатура и нажимаем "назад"Срабатывает со второго нажатия - когда клавиатура...

155
Как сделать плавные полоски на svg?

Как сделать плавные полоски на svg?

Как реализовать, чтоб при скролле до определенной секции, на фоне секции из одного угла в другой к примеру плавно выстреливали полоскиВидел...

199
js. Анонимные функции

js. Анонимные функции

Есть такой код:

188
Анимация уменьшения чисел с картинками

Анимация уменьшения чисел с картинками

У меня есть код на анимацию увеличения цифр от 0 до 100Как сделать чтобы когда число доходило до 100 происходила анимация уменьшения чисел обратно...

193