单击锚标记时如何验证表单中的数据

Question

I'm using Twitter's Bootstrap. After the user enters data in my form, they click a button to register. This loads a modal with a summary of the data they entered for them to confirm. I want to validate the data after they click register, but before the modal loads. How do I do that?

This is one of my form elements

<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
  <input id="inputEmail" class = "span11" type="text" placeholder="Email" name = "inputEmail" maxlength="32">
</div>

This loads the modal

<div class="control-group">
<div class="controls">
  <a href="#myModal" role="button" class="btn" id="registerBtn" data-toggle="modal">Register</a>
</div>

Thanks

Answer 1

try this, call function which validate your data. i mentioned how to call function rest you know how to put validation...

<script type="text/javascript">
function rest(){
alert('asdf');
}
</script>

<a href="javascript:rest()" role="button" class="btn" id="registerBtn" data-toggle="modal">Register</a>

Answer 2

You can take control of how the Modal appears by doing it in javascript. Remove the data-toggle="modal" attribute and instead hook your button to a function that will eventually do:

$('#myModal').modal('show');

You may have to initialise it beforehand or not, depending on your bootstrap version. That would look like:

$('#myModal').modal();

For moar infos:

http://twitter.github.io/bootstrap/javascript.html#modals