使用bootstrap验证输入不是html5消息

Question

我有一个模式与窗体，窗体是一个向导步骤，如果输入是空的边界更改为红色一切都可以与firts和第二步，但我有一个问题在THRID步是导致验证变更为HTML 5

我希望所有的输入改变从引导 到边缘 - 开始片断：JS隐藏：假 - >

var navListItems = $('div.setup-panel div a'), 

      allWells = $('.setup-content'), 

      allNextBtn = $('.nextBtn'); 



    allWells.hide(); 



    navListItems.click(function (e) { 

     e.preventDefault(); 

     var $target = $($(this).attr('href')), 
       $item = $(this); 

     if (!$item.hasClass('disabled')) { 
      navListItems.removeClass('btn-primary').addClass('btn-default'); 
      $item.addClass('btn-primary'); 
      allWells.hide(); 
      $target.show(); 
      $target.find('input:eq(0)').focus(); 
     } 
    }); 

    allNextBtn.click(function(){ 
     var curStep = $(this).closest(".setup-content"), 
      curStepBtn = curStep.attr("id"), 
      nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"), 
      curInputs = curStep.find("input[type='text'],input[type='url']"), 
      isValid = true; 

     $(".form-group").removeClass("has-error"); 
     for(var i=0; i<curInputs.length; i++){ 
      if (!curInputs[i].validity.valid){ 
       isValid = false; 
       $(curInputs[i]).closest(".form-group").addClass("has-error"); 
      } 
     } 

     if (isValid) 
      nextStepWizard.removeAttr('disabled').trigger('click'); 
    }); 

    $('div.setup-panel div a.btn-primary').trigger('click'); 

body{ 
    margin-top:40px; 
} 

.stepwizard-step p { 
    margin-top: 10px; 
} 

.stepwizard-row { 
    display: table-row; 
} 

.stepwizard { 
    display: table; 
    width: 100%; 
    position: relative; 
} 

.stepwizard-step button[disabled] { 
    opacity: 1 !important; 
    filter: alpha(opacity=100) !important; 
} 

.stepwizard-row:before { 
    top: 14px; 
    bottom: 0; 
    position: absolute; 
    content: " "; 
    width: 100%; 
    height: 1px; 
    background-color: #ccc; 
    z-order: 0; 

} 

.stepwizard-step { 
    display: table-cell; 
    text-align: center; 
    position: relative; 
} 

.btn-circle { 
    width: 30px; 
    height: 30px; 
    text-align: center; 
    padding: 6px 0; 
    font-size: 12px; 
    line-height: 1.428571429; 
    border-radius: 15px; 
} 

<div class="container"> 
<div class="stepwizard"> 
    <div class="stepwizard-row setup-panel"> 
     <div class="stepwizard-step"> 
      <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a> 
      <p>Step 1</p> 
     </div> 
     <div class="stepwizard-step"> 
      <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a> 
      <p>Step 2</p> 
     </div> 
     <div class="stepwizard-step"> 
      <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a> 
      <p>Step 3</p> 
     </div> 
    </div> 
</div> 
<form role="form"> 
    <div class="row setup-content" id="step-1"> 
     <div class="col-xs-12"> 
      <div class="col-md-12"> 
       <h3> Step 1</h3> 
       <div class="form-group"> 
        <label class="control-label">First Name</label> 

        <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" /> 

       </div> 

       <div class="form-group"> 

        <label class="control-label">Last Name</label> 

        <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" /> 

       </div> 

       <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> 

      </div> 

     </div> 

    </div> 

    <div class="row setup-content" id="step-2"> 

     <div class="col-xs-12"> 

      <div class="col-md-12"> 

       <h3> Step 2</h3> 

       <div class="form-group"> 

        <label class="control-label">Company Name</label> 

        <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" /> 

       </div> 

       <div class="form-group"> 

        <label class="control-label">Company Address</label> 

        <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" /> 

       </div> 

       <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> 

      </div> 

     </div> 

    </div> 

    <div class="row setup-content" id="step-3"> 

     <div class="col-xs-12"> 

      <div class="col-md-12"> 

       <h3> Step 3</h3> 

       <div class="form-group"> 

        <label class="control-label">Company Name</label> 

        <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" /> 

       </div> 

       <button class="btn btn-success btn-lg pull-right" type="submit">Finish!</button> 

      </div> 

     </div> 

    </div> 

这是MI fiddle

Answer 1

你需要写在第三级按钮class='nextBtn'类，它的样子引导验证还有一件事，如果你发布使用提交按钮，然后它可以添加完美引导的名称的数据，

所以你改变你的提交按钮类型从type="submit"到type="button"和POST数据通过锚标记和运行程序。

另一种解决方案，例如见定位标记：

function submit_form() { 
 
    document.form_name_here.submit(); 
 
}

<a href="#" onclick="submit_form(); return false;">Submit</a>

所以在这里，你可以在锚标记<a href='...'></a>就是它添加引导类。