Bootstrap/jQuery form Validation with ASP.NET - Very Basic Functionality

Question

I'm an experienced .NET developer, and am "getting there" with jQuery and Bootstrap. I'm attempting to integrate jQuery form validation (jquery.validator.js add-on), and can't seem to get the basics in place. I feel like I'm doing exactly what the documentation specifies in order to make a basic example work, but I'm obviously missing something.

Here's my page includes:

 <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="/Content/bootstrap-theme.min.css" rel="stylesheet" type="text/css" /> <link href="/Content/datepicker3.css" rel="stylesheet" type="text/css" /> <link href="/Content/site-style-main.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-2.1.1.min.js" type="text/javascript"></script> <script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script> <script src="/Scripts/bootstrap.min.js" type="text/javascript"></script> <script src="/Scripts/bootstrap-datepicker.js" type="text/javascript"></script> <script src="https://www.google.com/recaptcha/api.js" type="text/javascript"></script> <script src="/Scripts/site-script-step1validate.js" type="text/javascript"></script> 

Here's the relevant HTML pertaining to one of the fields to be validated, and the form:

 <form name="aspnetForm" method="post" action="Step1.aspx?RecertID=1" id="aspnetForm" class="form-horizontal" enctype="multipart/form-data" role="form"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon">First Name</span> <input name="ctl00$PageContent$RecertVFCFormView$ProviderFirstName" type="text" maxlength="256" id="ProviderFirstName" class="form-control" /> </div> </div> <a id="ExitButton" class="btn btn-primary btn-sm" href="javascript:__doPostBack(&#39;ctl00$PageContent$RecertVFCFormView$StepController$ExitButton&#39;,&#39;&#39;)"> <i class="glyphicon glyphicon-new-window" aria-hidden="true"></i> Exit </a> </form> 

And here's what my jQuery looks like (site-script-step1validate.js):

 $(document).ready(function () { $('#ProviderMedLicenseExpiration').datepicker(); $('#aspnetForm').validate({ onsubmit: false, rules: { ProviderFirstName: { required: true } }, highlight: function (element) { $(element).closest('.form-group').addClass('has-error'); } }); $('#ExitButton').click(function (e) { var isValid = $('#aspnetForm').valid(); if (!isValid) { e.preventDefault(); } }); }); 

At this point my expectation is simply that without that first name field populated, the form will fail to submit; it does not. I know that my ExitButton.click function is being reached and that isValid winds-up as true.

Seems pretty straight-forward and I can't quite make-out what I'm missing. Likely something very simple.

Answer 1

The problem is that ProviderFirstName rule must match with the name of the input control you're trying to validate. If you check the HTML you'll see that name is ctl00$PageContent$RecertVFCFormView$ProviderFirstName . Because of this the rule is just ignored.

A possible solution if you're using asp.net 4+ is to define ClientIDMode for TextBox control as static to avoid .net engine to change the id based on parent container.

Another option that may goes against your training purposes is adding required to TextBox markup and remove the custom rule ProviderFirstName . It would have the same end result and definitively would make more sense on a real scenario.