I have been looking at the following site - http://bootstrapvalidator.com/getting-started/#release
and I like the validation. I am developing an MVC 5 application and I am using bootstrap. I am currently using Decorators on my models to fire Validation.
e.e
[Required]
public string FirstName { get; set; }
My Markup then is as below:
<div class="col-xs-5">
@Html.TextBoxFor(model => model.FirstName, new { @class = "form-control input-sm" })
@Html.ValidationMessageFor(model => model.FirstName)
</div>
Another field on model would be for e.g
Age
[Range(0,150), ErrorMessage="Age field cannot be greater than 150"]
public int Age { get; set; }
So I would want that Error Message for Age injected into the toottip rather than repeating Validations server side and client side for every page in my Application
So if user trys to submit the form without FirstName filled in the validation message will fire.
What I would really like to achieve is something like this - http://bootstrapvalidator.com/settings/#form-container - so the field fires validation and the error message is put in ToolTip - has anyone done anything like this with MVC and is there a way we could force the Server Side Validation message to be injected into the error that would appear in that ToolTip?
Update
Attempting to use @Tieson answer below - not working currently. I added the styles just on the page that contain a percentage field that can only contain 3 numeric digits. My bundle config after downloading the bootstrap unobtrusice extension is as:
var thirdPartyScripts = new ScriptBundle("~/bundles/thirdpartyscripts").Include(
"~/Scripts/modernizr-*",
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery.validate.js",
"~/Scripts/jquery.validate.unobtrusive.js",
"~/Scripts/jquery.form.js",
"~/Scripts/jquery.blockUI.js",
"~/Scripts/jquery.autosize.min.js",
"~/Scripts/bootstrap.js",
"~/Scripts/jquery.validate.unobtrusive.bootstrap.js",
"~/Scripts/respond.js",
"~/Scripts/kendo/kendo.web.min.js",
"~/Scripts/kendo/kendo.aspnetmvc.min.js",
"~/Content/ckeditor/ckeditor.js",
"~/Content/ckeditor/adapters/jquery.js",
"~/Scripts/knockout-3.1.0.js",
"~/Scripts/knockout.mapping-latest.js");
thirdPartyScripts.Orderer = new AsIsBundleOrderer();
bundles.Add(thirdPartyScripts);
The percentage field in my view model is as:
[RegularExpression(@"^(?:999|[1-9]?[0-9]?[0-9])$", ErrorMessage = "Does this work")]
public int Percentage{ get; set; }
I added the update to the bootstrap.js file and then in the document.ready function I added the update to the setDefaults validation. What I am seeing is that if I enter valid numbers to the field eg 50 it does not highlight green. If I enter 4 digits and tab away from field it does highlight red but there is no X icon included in the field that will render the tooltip error message and then when I enter valid data again it does not turn back from red. I put an alert('here') in the showErrors function in the setDefaults on the validator in document.ready and I do not see it firing the alert?
The rendered html on screen when I enter invalid data and the field goes red is:
<input class="form-control input-validation-error text-danger" data-val="true" data-val-regex="Does this work" data-val-regex-pattern="^(?:999|[1-9]?[0-9]?[0-9])$" id="txtPercentage" name="Percentage" placeholder="Percentage" type="text" value="" aria-invalid="true">
My cshtml markup is as below:
<div class="row form-group">
@Html.LabelFor(m => m.Percentage, new { @class = "col-md-3 control-label" })
<div class="col-md-9">
@Html.TextBoxFor(m => m.Percentage, new { @class = "form-control", @placeholder = "Percentage", id = "txtPercentage" })
</div>
</div>
Do I need to add tootip to my markup here as well?
