Validating a form in Twitter Bootstrap Model

Question

I have a form in a modal with some required fields, but when I hit submit the form just reloads and I don\'t get any message for validation that I am using for submitting th

Answer 1

You don't have to add any script for validating form text fields if you added the required attribute.

Try this

<input type="text" name="title" style="width:300px" required="required"/>

or

<input type="text" name="title" style="width:300px" required/>

Answer 2

You can add "data-dismiss=modal" to the InfroTextSubmit button, and then use 'return false' on the '#InfroTextSubmit' click function to prevent the form from closing. If the form is valid you call 'submit()'.

Button code:

<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" id="save">Save changes</button>

Click function:

$('#save').click(function(){

    if ($('#myField1').val()==="") {
      // invalid
      $('#myField1').next('.help-inline').show();
      return false;
    }
    else {
      // submit the form here
      $('#InfroText').submit();
      return true;
    }     
});

There a several different approaches to the validation itself.

Working on Bootply: http://bootply.com/60244