Как отложить submit формы, пока не будет выполнено ajax условие в ней?

Question

[Саша Улыч]

Есть форма, с валидацией (jquery-validate плагин) . Проверяю в ней email по ajax на то создан он или нет, но форма все равно отправляется без проверки. Хотя проверка работает. Использовал preventDefault, return false. Все так же.

$('.validate').submit(function (e) {
        e.preventDefault();
        var success = true;
        
        // var input_website = $(this).find('input[name="website"]');

        $field = $(this).find('.required');
        $field.removeClass('has-error');


        // if (input_website.val().length == 0) {
        //     error.website = true;
        // }
        
        $.each($field,function(i,e){
            var value = $(e).val().toLowerCase();
            if(!value){
                $(e).addClass('has-error');
                success = false;
            }
            var badWords = ["facebook", "youtube", "google", "twitter", "pinterest", "linkedin", "imonomy", "weebly", "wix"];
            for(var i = 0; i < badWords.length; i++)
                {
                    // var value = $(this).value;
                    if ($(this).attr('id') == 'website') {
                        if(value.indexOf(badWords[i]) > -1 ) {
                            $(e).addClass('has-error');
                            success = false;
                            // return false;
                        } 
                    }

                }
            if ($(this).attr('id') == 'email') {
                        var value_email = $('input#email').val();
                       $.ajax({ url: 'check-email.php',
                             data: {"email": value_email},
                             type: 'post',
                             success: function(output) {
                                console.log(output.toString());
                                if (output.toString() == 'false') {
                                        $(e).addClass('has-error');
                                        success = false;
                                    }
                                  }
                        });
                    } 
        })
        // checkEmail();
        if (success) {
            params = $(this).serializeArray();
            params.push({
                'name': 'form',
                'value': $(this).attr('id')
            });

            // console.log(params);

            $.post('callback.php', params, function (data) {
                $('#reg .hide-m').hide();
                window.location.href = 'thanks.html';
            });
        }
        return false;
        
    });

Ссылка на jsfiddle -

Answer 1

[profesor08]

Зачем проверять данные на сервере, а потом снова отправлять их? Неправильная логика которая порождает кучу неправильного кода.

1. добавить полям формы аттрибуты required и задать форматы данных в них
2. отпправлять данные на сервер, где они и будут обрабатываться.

Comments

[Саша Улыч]

мне просто нужно проверить емейл, и если он не валидный то не отправлять

[Андрей]

Саша Улыч: regexp пользуйтесь )))) но а5 если регулярку пройдет, то не факт что не ошиблись в самом мыле или есть такой домен.. вариантов много, согласен что проверять надо на сервере... а на клиенте хватит regexp

Answer 2

[Андрей]

дык можно ж просто форму ajax'ом отправить, а уже из его вывода будет понятно, что там произошло..
кстати, если на невалидные данные отвечать http-заголовком 502 (вероятно, и 400 тоже, но надо пробовать), то сработает обработчик fail / error, так что не нужно будет переусложнять обработчик удачного запроса

а так - setInterval и в нем проверять, чтобы все-все проверки были успешны.