html - 让 Bootstrap 验证工作

Question

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

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

这是我的代码

$(".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

您可以为此使用 Bootstrap 扩展: http://1000hz.github.io/bootstrap-validator/

并像这样使用它:

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