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

我在使用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

来源

2017-05-16 Bhavin Dholakiya

我不是一个好的设计师，但我认为你应该保持在单选按钮部分共同格，然后显示的错误，而不是显示只有一个部分。由于该消息建议选择下面的任何一个。此外，如果你想突出的部分，您可以突出显示整个表单组。 –

你可以做一个plunkr链接吗？ –

@Neel，请检查。我在下面的问题中添加了Plunker链接。 –

的技巧是使用errorPlacement回调函数。

所以我检查所呈现的类型是单选按钮，然后我跟踪相应的最顶层父格，之后插入该消息。

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。

来源

2017-05-17 16:44:37

Thanks @Neel。让我试试我的登录表单。 –

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

回答

相关问题