Validating a form in Twitter Bootstrap Model
javascript, jquery, twitter-bootstrap
Solution
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/>`
Problem
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 the form jQuery, as below : ``` <script> $('#InfroTextSubmit').click(function(){ $('#InfroText').submit(); }); </script> ``` The Twitter Bootstrap Modal Code is : ``` <!-- Modal1 --> <div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Edit Introduction</h3> </div> <div class="modal-body"> <form id="InfroText" method="POST"> <input type="hidden" name="InfroText" value="1"/> <table> <tr><td>Title</td><td><input type="text" name="title" style="width:300px" required="require"/></td></tr> <tr><td>Introudction</td><td><textarea name="contect" style="width:300px;height:200px"></textarea></td></tr> </table> </form> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary" id="InfroTextSubmit">Save changes</button> </div> </div> <script> $('#InfroTextSubmit').click(function(){ $('#InfroText').submit(); }); </script> ``` So how can i Validate the Form and not let the model close and reload if something is wrong with the form ? Regards,