1

Делаю валидацию полей формы при помощи jQuery Validation.

Подключаю библиотеку jQuery, подключаю скрипт jquery.validate.min.js Вот форма

<form action="" class="ajax_form" id="commentForm">
            <label for="name_popup">Ваше имя</label>
            <input type="text" name="name" id="name_popup" required>
            <label for="phone_popup">Телефон</label>
            <input type="text" name="phone" id="phone_popup" required>
            <label for="mail_popup">E-mail</label>
            <input type="email" name="mail" id="mail_popup" required>
            <input type="submit" class="button" value="Отправить заявку">
            <input type="hidden" name="form_type" value="">
        </form>

<script> $("#commentForm").validate();
</script>

Также есть скрипт для отправки форм:

 $('.ajax_form').submit(function() {
    form = $(this);
    var str = $(this).serialize();

    $.ajax({
        type: "POST",
        url: "../send.php",
        data: str,
        success: function(msg) {
          var yaCounter28330736 = new Ya.Metrika({id: 28330736});
          yaCounter28330736.reachGoal('order');
          height = $(form).height();
          $(form).hide();
          $(form).after('<div class="after" style="padding:25px;height:'+height+';text-align:center;">'+msg+'</div>');
          setTimeout(function() {
            $('#popup, #splash').fadeOut(1000);
            $(form).fadeIn();
            $(form).delay(1000).next('.after').remove();
          },4000);
          console.log(msg);
        }
    });

    $(this).find(".button").attr('disabled','disabled');
    $(this).find(".big_button").attr('disabled','disabled');
    return false;
});

Как их объединить, чтобы при нажатии "отправить" сначала была проверка на валидацию, а потом уже отправка формы?

1
  • @Алена Кондрашова, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом). 23 мар 2015 в 15:29

1 ответ 1

3
$(".ajax_form").validate({
   onkeyup: false,
   rules: {
       name: {required: true},
       phone: {required: true},
       mail: {required: true},
   },
   messages: {
       name: {required: 'blablabla'},
       phone: {required: 'asdasd'},
       mail: {required: 'egaweawe'},
   },
   errorPlacement: function(error,element) {return true;},
   invalidHandler: function(event, validator) {alert(validator.errorList[0].message);},
   submitHandler: function(form) {
        str form.serialize();
        $.ajax({
            type: "POST",
            url: "../send.php",
            data: str,
            success: function(msg) {
                var yaCounter28330736 = new Ya.Metrika({id: 28330736});
                yaCounter28330736.reachGoal('order');
                height = $(form).height();
                form.hide();
                form.after('<div class="after" style="padding:25px;height:'+height+';text-align:center;">'+msg+'</div>');
                setTimeout(function() {
                    $('#popup, #splash').fadeOut(1000);
                    form.fadeIn();
                    form.delay(1000).next('.after').remove();
                },4000);
                console.log(msg);
           }
      });
   }
});

Ваш ответ

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

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