Twitter引导程序模型表单验证

Question

I'm not sure if this is a duplicate of this but is it the use of the modal is is preventing form validations such as http://jsfiddle.net/5WMff/ ? I'm wondering if anyone could clarify on this. I've tried this but the validation i need needs to check for not only the length of the input but whether it is left blank or not. My attempt is --> here

My javascript code:

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

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

      return true;
    }



});

My html code:

<a href="#scenarioform" role="button" class="btn" data-toggle="modal">Launch modal</a>

<!-- Modal Pop Up - Scenario Form -->
<div id="scenarioform" class="modal hide fade in" style="display: none;">  
    <div class="modal-body">  
        <div id="maincontent" class="span8">

            <form action="" id="contact-form" class="form-horizontal">
              <fieldset>
                <legend>Scenario Form</legend>
                <div class="control-group">
                  <label class="control-label" for="scenarioName">Scenario name:</label>
                  <div class="controls">
                    <input id="scenarioName" name="scenarioName" type="text" placeholder="" class="input-xlarge" required="required">
                    <span class="hide help-inline">This is required</span><span class="hide help-inline2">More</span>
                  </div>
                </div>

                <div class="form-actions">
                    <!--take away data dismiss when we want to submit it--> 
                    <button type="submit" class="btn btn-primary btn-large" data-dismiss="modal" id="InfroTextSubmit">Submit</button>
                    <button type="reset" class="btn" data-dismiss="modal" onclick="">Cancel</button>
                </div>
              </fieldset>
            </form>          
        </div>
    </div>
</div>

Answer 1

remove data-dismiss in submit button it prevents the functionality.then it works fine

<button type="submit" class="btn btn-primary btn-large" id="InfroTextSubmit">Submit</button>
<button type="reset" class="btn" data-dismiss="modal" onclick="">Cancel</button>