Почему не работает ajax форма?

Question

[Jony1337]

Привет есть такая форма

<form  id="form_test"  method="post" class="s-form validateble register_form" action="#">
  <div class="title">RG</div>
  <div class="s-field ">
    <div class="text-wrapper">
      <input type="email" value="" tabindex="1" placeholder="E-mail" id="email_user"/>
<label id="email_user_error" class="error"></label>
      <div class="icon_email"></div>
    </div>
  </div>
  <div class="s-field ">
    <div class="text-wrapper">
      <input type="text" value="" tabindex="2" placeholder="Log" id = "name_user" />
	  <label id="name_user_error" class="error"></label>
      <div class="icon_username"></div>
    </div>
  </div>
  <div class="s-field">
    <div class="text-wrapper">
      <input type="password" value="" tabindex="3" placeholder="Passw" id="password_user" />
<label id="password_user_error" class="error"></label>
      <div class="icon_password"></div>
    </div>
  </div>
  <div class="s-field">
    <div class="text-wrapper">
      <input type="password" value="" tabindex="4" placeholder="Passw2" id="password_2_user" />
<label id="password_2_user_error" class="error"></label>
      <div class="icon_password"></div>
    </div>
  </div>
  <div class="s-buttons">
	 <input type="submit" value="Reg!" class="button big green wide enable" id="send_data" />
  </div>
</form>

и js проверка

$(document).ready(function() {
    $('#form_test').submit(function(){
		alert ("succes ");
        // убираем класс ошибок с инпутов
        $('input').each(function(){
            $(this).removeClass('error_input');
        });
        // прячем текст ошибок
        $('.error').hide();
         
        // получение данных из полей
        var name_user = $('#name_user').val();
        var email_user = $('#email_user').val();
        var password_user = $('#password_user').val();
        var password_2_user = $('#password_2_user').val();
         
        $.ajax({
            // метод отправки 
            type: "POST",
            // путь до скрипта-обработчика
            url: "vd.php",
            // какие данные будут переданы
            data: {
                'name_user': name_user, 
                'email_user': email_user,
                'password_user': password_user,
                'password_2_user': password_2_user
            },
            // тип передачи данных
            dataType: "json",
            // действие, при ответе с сервера
            success: function(data){
                // в случае, когда пришло success. Отработало без ошибок
                if(data.result == 'success'){   
                    alert('форма корректно заполнена');
                // в случае ошибок в форме
                }else{
                    // перебираем массив с ошибками
                    for(var errorField in data.text_error){
                        // выводим текст ошибок 
                        $('#'+errorField+'_error').html(data.text_error[errorField]);
                        // показываем текст ошибок
                        $('#'+errorField+'_error').show();
                        // обводим инпуты красным цветом
                        $('#'+errorField).addClass('error_input');                      
                    }
                }
            }
        });
        // останавливаем сабмит, чтоб не перезагружалась страница
        return false;
    });
});

Делаю клик сразу редирект никаких проверок на js не происходит , почему ?

Comments

[Arman]

если после alert ("succes "); поставить return false? а так отрабатывает стандартный механизм, значит где-то есть синтакс. ошибка в коде JS. попробуйте открыть консоль браузера, там иногда можно успеть увидеть ошибку

[Jony1337]

Arik: да вот и проблема prntscr.com/dnyfik

Answer 1

[Влад]

Попробуй остановить все действия при клике

$('#form_test').on('submit', function(e) {
    e.preventDefault();
});

Вроде это должно предотвратить редирект.

P.S. И еще данные с формы удобнее передавать с помощью serialize()
data: $('#form_test').serialize(),

Но в этом случает необходимо будет проставить у инпутов необходимый name.

Answer 2

[Victor Golovko]

Посмотрите в консоли логи. возможно где то ошибка закралась (например не подключен jquery)

Comments

[Jony1337]

да вот и проблема prntscr.com/dnyfik