如何在单选按钮后显示验证消息？

Posted 2023-03-05

【中文标题】如何在单选按钮后显示验证消息？

【英文标题】：How to show validation message after radio buttons?

【发布时间】：2017-10-15 00:16:52

【问题描述】：

我在使用 Bootstrap 的表单中有两个内联单选按钮。但是当我验证它时，消息显示在第一个单选按钮内部，而不是在第二个单选按钮之后显示。我想显示诸如电子邮件和密码之类的单选按钮消息。这是我的表单的屏幕截图。

未经验证：

通过验证：

html 表单：

<form name="registration" action="">
        <div class="signingInner"> 
          <h4 style="font-weight: 500;  text-align:center; font-size: 20px ">Sign in to your Account</h4>
          <div class="form-group">
              <label for="emailId">Email Address:</label>
              <input type="text" class="form-control" id="login_email" name="login_email" placeholder="Please enter Email address">
          </div>
          <div class="form-group">
              <label for="pwd">Password:</label>
              <input type="password" class="form-control" name="login_password" id="login_password" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;">
          </div>
          <div class="form-group">
              <div class="radio-inline" style="padding-left: 100px;">
                  <input type="radio" id="user" name="LoginMode" value="user" >
                  As <strong>User</strong> </>
              </div>
              <div class="radio-inline" style="padding-left: 30px;">
                  <input type="radio" id="company" name="LoginMode" value="company" >
                  As <strong>Company</strong></>
              </div>
          </div>
        <input type="submit" name="btnLogin" class="btn btn-lg btn-primary btn-block" value="Login"></input>
        </div>
    </form>

Plunker 链接： https://plnkr.co/edit/0vpvU9QbRu8Mlwbi04ti?p=preview

【问题讨论】：

我不是一个好的设计师，但我认为你应该在单选按钮部分保留一个公共 div，然后在那里显示错误，而不是只显示一个部分。由于消息建议选择以下任何一项。如果要突出显示部分，也可以突出显示整个表单组。

你能做一个plunkr链接吗？

@Neel，请检查。我在问题下方添加了 Plunker 链接。

【参考方案1】：

诀窍是使用errorPlacement回调函数。

所以我正在检查呈现的类型是否是单选按钮，然后我正在跟踪适当的最顶层父 div 并在之后插入消息。

errorPlacement: function(error, element) 
        if ( element.is(":radio") )                    
            error.insertAfter( element.parent().parent().parent().parent());
        
        else  // This is the default behavior of the script for all fields
            error.insertAfter( element );
        
 ,

查看更新后的plunkr here。

输出看起来像

编辑：

我终于更新了你提供的original plunkr。

【讨论】：

谢谢@Neel。让我试试我的登录表单。

@Neel，我看到这是 Bootstrap 3.0.3。 Bootstrap 4.1.3 有一个内置的验证工具：getbootstrap.com/docs/4.1/components/forms/#validation，但对水平单选按钮有点挑剔。您如何使该解决方案适用于 Bootstrap 4.1.3？谢谢！