Question

我不确定这是否与this重复，但使用模式是否会阻止http://jsfiddle.net/5WMff/等表单验证？我想知道是否有人可以澄清这一点。我已经尝试了this但是我需要的验证不仅要检查输入的长度，还要检查是否留空。我的尝试是 - ＆gt; here

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

Answer 1

在提交按钮中删除data-dismiss它会阻止功能。然后它可以正常工作

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

Twitter引导模型表单验证

1 个答案: