Невозможно проверить форму в Bootstrap Modal с помощью JavaScript

Используя приведенный ниже код, я отправляю электронное письмо, но если я оставлю поля ввода пустыми, оно все равно будет отправлено. Я хочу проверить форму перед ее отправкой, чтобы убедиться, что они не пустые.

j( document ).on( "submit", ".form-horizontal", function() {    
    j.post(this.action, j(this).serialize(), function(){
            //this callback is executed upon success full form submission close modal here
    }, "script");   
    j(this).parent().find('.respuesta').removeClass('oculto'); //to show a success message
    j(this).parent().find('.nota-enviar').addClass('disabled'); //to prevent double click
    setTimeout(function() {j('.modal').modal('hide');}, 2000); //close modal after 2 seconds    
    return false;
});

Я попытался адаптировать этот пример, но не смог заставить его работать. Вы можете увидеть форму в работе здесь. Перейдите в пресс-центр (Sala de prensa). Отобразите заметку, нажмите «Поделиться» (Compartir) и щелкните значок почты. Это покажет Modal с формой.


javascript validation forms jquery bootstrap-modal
person Estudio 3551    schedule 09.06.2015    source источник
comment
Вы используете очень старую версию jQuery или live() все еще работает для обеспечения обратной совместимости? api.jquery.com/live (должен был быть удален в версии 1.9)   -  person Mackan    schedule 09.06.2015
comment
Я меняю live() на on(), но перестаю работать. Он отправляет почту и перезагружает страницу. Я просто хочу закрыть Modal без перезагрузки. Спасибо @Макан   -  person Estudio 3551    schedule 09.06.2015
comment
Ok. я заставить его работать с on(), изменить код выше.   -  person Estudio 3551    schedule 09.06.2015
comment
похоже, есть метод $.fn.validate, в котором $ неузнаваем. Замените $ на jQuery только для этого метода.   -  person Dhiraj    schedule 09.06.2015
comment
Где $.fn.validate? Форма создается с помощью плагина Contact Form 7 для Wordpress. Я не знаю, как использовать проверку в Modal.   -  person Estudio 3551    schedule 09.06.2015

Ответы (1)


arrow_upward
0
arrow_downward

Есть много плагинов, которые помогут вам с проверкой формы, но для одной формы с 4 элементами это, вероятно, не нужно. Ваши классы «Контактная форма 7» должны проверять элементы, но поскольку на вашем сайте есть несколько ошибок JavaScript (проверьте консоль) Я думаю, что это не работает должным образом.

Это очень простой и простой пример того, как это можно сделать без зависимости от плагина (с использованием предупреждения):

$(document).on("submit", ".form-horizontal", function() {
  var errors = '';
  if ($('input[name="your-name"]').val() == '') errors += ' - Name is required\n';
  if ($('input[name="to-email"]').val() == '') errors += ' - To mail is required\n';
  if ($('input[name="your-email"]').val() == '') errors += ' - Your mail is required\n';
  if ($('textarea[name="your-message"]').val() == '') errors += ' - Message is required\n';
  if (errors != '') {
    alert('The following errors occured:\n' + errors);
  } else {
    alert('form valid, posting...');
    $.post(this.action, $(this).serialize(), function() {
      //this callback is executed upon success full form submission close modal here
    }, "script");
    $(this).parent().find('.respuesta').removeClass('oculto'); //to show a success message
    $(this).parent().find('.nota-enviar').addClass('disabled'); //to prevent double click
    setTimeout(function() {
      $('.modal').modal('hide');
    }, 2000); //close modal after 2 seconds
  }
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post" action="/echo/html/" class="form-horizontal">
  Name: <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required required form-control" aria-required="true" aria-invalid="false" />
  <br/>To mail: <input type="email" name="to-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email required form-control" aria-required="true" aria-invalid="false" placeholder="Dirección de correo electrónico"/>
  <br/>Your mail: <input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email required form-control" aria-required="true" aria-invalid="false" placeholder="Tu dirección de correo electrónico"/>
  <br/>
  <textarea name="your-message" cols="40" rows="3" class="wpcf7-form-control wpcf7-textarea form-control" aria-invalid="false"></textarea>
  <br/>
  <input type="submit" value="enviar" class="wpcf7-form-control wpcf7-submit nota-enviar btn btn-enviar btn-lg pull-left" />
</form>

Вы также можете использовать немного более сложное решение, перебирая элементы и переключая «требуемый» диапазон:

$('.hide').hide();
$(document).on("submit", ".form-horizontal", function (e) {
    $('.hide').hide();
    var errors = false;
    $('input:not([type=hidden],[type=button],[type=submit]), textarea', e.target).each(function() {
        if ($(this).val() == '') {
           $(this).closest('div').find('span.help-inline').show().css('color','red');
           errors = true;
        }
    });
    if (!errors) {
        $.post(this.action, $(this).serialize(), function () {
            //this callback is executed upon success full form submission close modal here
        }, "script");
        $(this).parent().find('.respuesta').removeClass('oculto'); //to show a success message
        $(this).parent().find('.nota-enviar').addClass('disabled'); //to prevent double click
        setTimeout(function () {
            $('.modal').modal('hide');
        }, 2000); //close modal after 2 seconds
    }
    return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post" action="/echo/html/" class="form-horizontal">
  <div>Name: <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required required form-control" aria-required="true" aria-invalid="false" /> <span class="hide help-inline">Requerido</span></div>
  <div><br/>To mail: <input type="email" name="to-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email required form-control" aria-required="true" aria-invalid="false" placeholder="Dirección de correo electrónico"/> <span class="hide help-inline">Requerido</span></div>
  <div><br/>Your mail: <input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email required form-control" aria-required="true" aria-invalid="false" placeholder="Tu dirección de correo electrónico"/> <span class="hide help-inline">Requerido</span></div>
  <br/>
  <div><textarea name="your-message" cols="40" rows="3" class="wpcf7-form-control wpcf7-textarea form-control" aria-invalid="false"></textarea> <span class="hide help-inline">Requerido</span></div>
  <br/>
  <input type="submit" value="enviar" class="wpcf7-form-control wpcf7-submit nota-enviar btn btn-enviar btn-lg pull-left" />
</form>

person Mackan    schedule 09.06.2015
comment
Спасибо большое, работает!!!!! Я просто добавляю эту строку j(this).closest('div').find('span.help-inline').removeClass('hide'); под j(this).closest('div').find('span.help-inline').show().css('color','red');, чтобы показать сообщение об ошибке. - person Estudio 3551; 10.06.2015