javascript - 无法使用 JavaScript 验证 Bootstrap Modal 中的表单

Question

使用下面的代码我发送一封电子邮件，但如果我将输入留空，它仍然会发送。我想在发送之前验证表单，以确保它们不为空。

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;
});

我尝试适应this example但我无法让它发挥作用。工作中可以看到表格here 。前往新闻发布室 (Sala de prensa)。显示注释，单击“共享”(Compartir)，然后单击邮件图标。这将显示带有表单的模态框。

Answer 1

有许多插件可以帮助您进行表单验证，但对于具有 4 个元素的单个表单，可能不需要它。您的“Contact form 7”类应该验证元素，但由于您的网站上有一些 javascript 错误 ( check console )，我猜它没有像应有的那样工作。

这是一个非常基本且简单的示例，说明如何在没有插件依赖的情况下完成此操作(使用警报):

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