Twitter引導模型表單驗證

我不確定這是否是this的重複，但是它使用的模式是阻止表單驗證，如http://jsfiddle.net/5WMff/？我想知道是否有人可以澄清這一點。我試過this但我需要的驗證不僅需要檢查輸入的長度，而且它是否留空。我嘗試 - >here Twitter引導模型表單驗證

我的javascript代碼：

$('#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; 
    } 



});

我的html代碼：

<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>

來源

2013-11-04 DrowningInCode

刪除data-dismiss提交按鈕，它可以防止functionality.then它工作正常

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

來源

2013-11-04 12:22:34

Twitter引導模型表單驗證

回答

相關問題