Getting bootstrap validation to work - html

Question

I'm using bootstrap for my site and I'm busy creating a form. I have some required fields but if I submit my form without filling those fields I don't get a red box around the input field. But if I click on the input box I get the red box.
Here is my 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>
Here is my 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();
}
});
Here is a jsfiddle: JSFIDDLE

Answer 1

You can use a bootstrap extension for this:
http://1000hz.github.io/bootstrap-validator/
and use it like this:
$('form').validator().on('submit', function (e) {
if (e.isDefaultPrevented()) {
return false;
} else {
return true;
}
});