如何在單選按鈕後顯示驗證消息？

我在使用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。讓我試試我的登錄表單。 –

如何在單選按鈕後顯示驗證消息？

回答

相關問題