让引导程序验证正常工作

Question

我为我的站点使用引导程序，并且正在忙于创建表单。我有一些必填字段，但如果我提交表单而不填写这些字段，则输入字段周围没有红框。但是，如果我点击输入框，我会看到红色框。

这里是我的html

<li> 
<div class="form-group"> 
    <label>* First Name</label> 
    <div class="registration_firstName has-error"> 
     <input id="firstName" type="text" name="firstName" class="form-control" required> 
    </div> 
</div> 
</li> 

<button value="" class="registration_submit">Send</button> 

这里是我的js

$(".registration_submit").click(function(){ 
    var errorMsg = ""; 
    $(".error-success").hide(); 
    $(".has-error").each(function(index, element){ 
     if($.trim($(this).val()) == ""){ 
      errorMsg+= "error"; 
     } 
     if($(this).attr("id") == "firstName"){ 
      errorMsg+= "error"; 
     } 
    }); 

    if(errorMsg != ""){ 
     $(".submit").show(); 
     $(".error-success").html("please fill out the required fields."); 
     $(".error-success").fadeIn(250); 
     return false; 
    } 

    if($.trim(ajaxemail) == "success"){ 
     $(".submit").show(); 
     $(".error-success").html("Thank you. A confirmation email has been sent."); 
     $(".error-success").fadeIn(250); 
     $('#email').val(""); 
    }else{ 
     $(".submit").show(); 
    } 

}); 

这里是一个的jsfiddle：JSFIDDLE

Answer 1

你可以使用这个自举扩展： http://1000hz.github.io/bootstrap-validator/

并像th一样使用它是：

$('form').validator().on('submit', function (e) { 
    if (e.isDefaultPrevented()) { 
    return false; 
    } else { 
    return true; 
    } 
});