时间戳

首页 > 解决方案 > 在我的 Web 表单上单击提交按钮时，输入字段的验证错误怎么会显示，即使这些字段有值？

javascript - 在我的 Web 表单上单击提交按钮时，输入字段的验证错误怎么会显示，即使这些字段有值？

问题描述

在测试使用 HTML、CSS、Bootstrap、PHP 和 jQuery 构建的 Web 表单时，我要做的第一件事就是单击提交按钮。当我这样做时，文本危险错误会按预期显示在输入和文本区域字段下方，因为这些字段是空的。如果我在输入字段“名称”中添加一个值并再次单击提交按钮，则文本危险字段继续显示在名称字段下方。当我对电子邮件和安全检查字段尝试相同的操作时，情况也是如此。

当我在消息文本区域字段中添加值时，消息字段的文本危险错误与其他错误一起消失。消息字段需要有一个值才能使所有字段的错误消失。

我应该如何设置我的 jQuery，以便在将值添加到字段并单击提交按钮进行测试后，该特定字段的文本危险错误不再显示？

HTML 和 jQuery 代码 

  <div class="container">
    <div class="row">
      <form method="post" action="index.php" class="form-horizontal">
         <div class="form-group">
           <label for="name" class="col-sm-2 control-label">Name</label>
           <div class="col-sm-10">
           <input type="text" id="name" name="name" placeholder="Enter your name" class="form-control" value="<?php echo $name;?>">
           <p class="text-danger">You need to enter a name value</p>
           </div>
         </div>
         <div class="form-group">
           <label for="email" class="col-sm-2 control-label">Email</label>
           <div class="col-sm-10">
           <input type="email" id="email" name="email" placeholder="your@email.com" class="form-control" value="<?php echo $email;?>">
           <p class="text-danger">You need to enter a valid email</p>
           </div>
         </div>
         <div class="form-group">
           <label for="message" class="col-sm-2 control-label">Message</label>
           <div class="col-sm-10">
           <textarea id="message" name="message" rows="4" class="form-control"><?php echo $message;?></textarea>
           <p class="text-danger">You need to enter a message</p>
           </div>
         </div>
         <div class="form-group">
           <label for="secCheck" class="col-sm-2 control-label">
           <?php echo $_SESSION["a"] .'+'.$_SESSION["b"];?>
           </label>
           <div class="col-sm-10">
           <input type="text" id="secCheck" name="secCheck" class="form-control">
           <p class="text-danger">Answer the question above</p>
           </div>
         </div>
         <div class="form-group">
          <div class="col-sm-10 col-sm-offset-2"> 
             <input type="submit" value="Send" class="btn btn-primary btn-large btn-block" id="submit" name="submit">
          </div>
         </div>
         <div class="form-group">
          <div class="col-sm-10 col-sm-offset-2"> 
             <?php echo $result; ?>
          </div>
         </div
      </form>   
    </div>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>

 $('form').on('submit',function(){
     $(".text-danger").hide();
     var holderValue = false;
     $(this).find('input[type!="hidden"]').each(function(){

        if(!$(this).val()){holderValue=true; $(this).parent().find(".text-danger").show();}
     })
     if(!$("#message").val()){holderValue=true; $(this).parent().find(".text-danger").show();};

     if(holderValue){return false;}
     // event.preventDefault();
     // console.log('form submitted');   
     })


$("input").on("change paste keyup", function() {
  if($(this).val()){
 $(this).parent().find(".text-danger").hide();
} 
});

$("textarea").on("change paste keyup", function() {
  if($(this).val()){
 $(this).parent().find(".text-danger").hide();
} 
});


</script>

标签： javascriptjqueryformsvalidationform-submit

解决方案

引导自定义表单

自定义验证需要几个关键的 Bootstrap 属性和类：

HTML

  • <form ... 不验证>

  • 全部<input ... 必填>

  • 移除所有<p class='danger-text'>...

  • 用无效反馈替换以前的<aside class=''>

标记也已从更改<div>为更具语义的标记，但这不是必需的。布局也发生了变化——最初布局只有一个.row，现在有几个.form-rows（不确定这是不是故意的，但使用 s 时看起来更好.form-control）。

jQuery

  • 在每个.form-control...
    $('.form-control').each(function() {...

  • ...如果电流.form-control无效...
    if ($(this).is(':invalid')) {...

  • ...停止提交并显示无效消息...
    e.preventDefault();
    $(this).next('.invalid-feedback').show();...

  • ...否则，如果需要，隐藏无效消息。
    } else {
    $(this).next('.invalid-feedback').hide();
    }

演示

$('.invalid-feedback').hide();
$('#main').on('submit', function(e) {
  $('.form-control').each(function() {
    if ($(this).is(':invalid')) {
      e.preventDefault();
      $(this).next('.invalid-feedback').show();
    } else {
      $(this).next('.invalid-feedback').hide();
    }
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">

<main class="container">
  <form id='main' class="form-horizontal" method="post" action="index.php" novalidate>

    <section class="form-row">
      <fieldset class="form-group col-sm-10">
        <label for="name" class="control-label">
          Name
        </label>
        <input id="name" name="name" class="form-control" type="text" placeholder="Enter your name" required>
        <aside class="invalid-feedback">
          You need to enter your name.
        </aside>
      </fieldset>
    </section>

    <section class="form-row">
      <fieldset class="form-group col-sm-10">
        <label for="email" class="control-label">
          Email
        </label>
        <input id="email" name="email" class="form-control" type="email" placeholder="your@email.com" required>
        <aside class="invalid-feedback">
          You need to enter your email.
        </aside>
      </fieldset>
    </section>

    <section class="form-row">
      <fieldset class="form-group col-sm-10">
        <label for="message" class="control-label">
          Message
        </label>
        <textarea id="message" name="message" class="form-control" rows="4" required></textarea>
        <aside class="invalid-feedback">
          You need to enter a message.
        </aside>
      </fieldset>
    </section>

    <section class="form-row">
      <fieldset class="form-group col-sm-10">
        <label for="secCheck" class="control-label">
        </label>
        <input id="secCheck" name="secCheck" class="form-control" type="text" required>
        <aside class="invalid-feedback">
          Answer the security question above.
        </aside>
      </fieldset>
    </section>

    <section class="form-row">
      <fieldset class="form-group col-sm-10 col-sm-offset-2">
        <input id="submit" name="submit" class="btn btn-primary btn-large btn-block" type="submit" value="Send">
      </fieldset>
    </section>

    <section class="form-row">
      <fieldset class="form-group col-sm-10 col-sm-offset-2">
        <output id='result'></output>
      </fieldset>
    </section>

  </form>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>

推荐阅读