0

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

});
3
  • Запрос происходит? Или запроса вообще не происходит? А console.log(msg) срабатывает? 16 сен 2017 в 20:09
  • @ЕвгенийИванов Запрос вообще не происходит. console.log() не срабатывает 16 сен 2017 в 20:16
  • Тогда вам логично подумать, что не происходит клику, там и ищите проблему. 16 сен 2017 в 21:15

1 ответ 1

0

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

    $( "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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.