CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapvalidationradio-button
BhavinD.
BhavinD.

Reputation: 481

How to show validation message after radio buttons?

I have two inline radio button in a form using Bootstrap. But when I validate it then the message showing inside of first radio button instead of showing after second radio button. I would like to show that radio button message like Email and password. Here is the screenshot of my form.

Without Validation:enter image description here

With Validation: enter image description here

HTML Form: 

<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 Link: https://plnkr.co/edit/0vpvU9QbRu8Mlwbi04ti?p=preview

Upvotes: 3

Views: 5978

Answers (1)

Navoneel Talukdar
Navoneel Talukdar

Reputation: 4598

The trick is to use errorPlacement callback function.

So I am checking whether the rendered type is radio button then I am tracking the appropriate topmost parent div and inserting the message after that.

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

See the updated plunkr here.

And the output looks like enter image description here

EDIT:

I have finally updated the original plunkr provided by you.

Upvotes: 2

Related Questions