CODEWITHSUNDEEP
bootstrap-modalformvalidation-plugin
Ris
Ris

Reputation: 1164

formvalidation.io validation issue with Bootsrap design

Let’s say if you have two fields in same row and one requires validation but other not when you trigger validation it shows validation error for other field too. For example, Below is my validation only on “Logged by name” but when I submit the form it throws for “Manager” field too. As soon as I enter something in “Logged by name” field it gets OK.

enter image description here

Here is my HTML,

<div id="Section_ObserverDetails">
    <div class="col-sm-12">
        <div class="row">
            <div class="panel-body form-horizontal">
                <div class="form-group">
                <div class="col-sm-2">
                    <label for="pro_LoggedByName" class="col-sm-12 control-label">Logged by name</label>
                </div>
                <div class="col-sm-4">
                      <input type="text" class="form-control" id="pro_LoggedByName" name="pro_LoggedByName" value=""    >                           </div>

                <div class="col-sm-2">
                    <label for="top_Manager" class="col-sm-12 control-label">Manager</label>
                </div>
                <div class="col-sm-4" id="div-top-manager">
                     <div class="radio">
                        <label class="form-radio form-normal form-text form-success "><input type="radio" name="top_Manager"   value="Yes">Yes</label><label class="form-radio form-normal form-text form-success active"><input type="radio" name="top_Manager" checked="checked"  value="No">No</label>
                     </div>
                </div>
                  </div>
              </div>
            </div>
      </div>
</div>

If I put class="form-group" tag for both the fields then problem gets resolve but "Manager" field slides down to the next row which I don't want.

Any idea ?

Upvotes: 0

Views: 729

Answers (1)

Shehary
Shehary

Reputation: 9992

In your validation script code, set custom error selector e.g row: '.col-sm-4', so it will override the default error class .has-error .form-control and only target the selector which contains the required input field.

fields: {
    pro_LoggedByName: {
        row: '.col-sm-4', //<----This is custom error selector
        validators: {
            notEmpty: {
                message: 'The city is required'
            }
        }
    }
}

More Information & Reference

Fiddle

Upvotes: 3

Related Questions