Validate input text in bootstrap modal

Question

I want to validate a form in a bootstrap modal without using any framework. It\'s actually a simple modal with only an input text and two buttons \"Close\" and \"Send\". Th

Answer 1

its very easy

just apply class .has-error to div by javascript function

<div class="form-group has-error">
    <div class="row">

        <label class="col-xs-2 col-sm-2 control-label">city:</label>

        <div class="col-xs-3 col-sm-3 formGroups"
            id="city_form1">
            <form:input name="city" class="form-control"
                placeholder="City" data-toggle="tooltip"
                data-placement="bottom" title="City" maxlength="15" />

        </div>
    </div>
</div>

Answer 2

You need to change the CSS classes of the input parent element div.form-group, not the input itself:

The HTML after the submit button click should look like this:

<div class="form-group has-error">
   <div class="col-lg-12">
      <label class="control-label" for="firstname">Name</label>
      <input type="text" class="form-control required" id="firstname" name="firstname">
    </div>
</div>

To achieve this, alter your JavaScript code to this:

<script type="text/javascript">
  $('#myForm').on('submit', function(e) {
    var firstName = $('#firstname');

    // Check if there is an entered value
    if(!firstName.val()) {
      // Add errors highlight
      firstName.closest('.form-group').removeClass('has-success').addClass('has-error');

      // Stop submission of the form
      e.preventDefault();
    } else {
      // Remove the errors highlight
      firstName.closest('.form-group').removeClass('has-error').addClass('has-success');
    }
  });
</script>

Answer 3

Just use required inside the input field like this

<input type="text" class="form-control required" id="firstname" name="firstname" required/>

Answer 4

div in boot strap...

<div class="form-group">
    <div class="row">

        <label class="col-xs-2 col-sm-2 control-label">city:</label>

        <div class="col-xs-3 col-sm-3 formGroups"
            id="city_form1">
            <form:input name="city" class="form-control"
                placeholder="City" data-toggle="tooltip"
                data-placement="bottom" title="City" maxlength="15" />

            <small class="help-block col-sm-offset-0 col-sm-9"
                style="display: none;">city must require</small>
        </div>
    </div>
</div>

as you see there is .help-block is display: none now you write javascript function and check validation and if validation now pass make it display: block ... that's way you can do

enjoy with boot strap :)