jQuery Validation in model binding is used to check if the user has entered all the valid text in input fields or not. This is done before submitting the form to the server so that server-side load lifting can be minimized.
We are using Data Annotation validators to perform the validation in an ASP.NET MVC application in model binding simply by adding one or more attributes – such as the required or StringLength attribute – to a class property.
We can also use jQuery in model binding to check if the user has entered all the valid text in input fields or not.
Step 1
Add a class with any name in Model Folder.
- public class Registration {
- public string FirstName {
- get;
- set;
- }
- public string LastName {
- get;
- set;
- }
- public int UserId {
- get;
- set;
- }
- public string Password {
- get;
- set;
- }
- public string Email {
- get;
- set;
- }
- public string Contact {
- get;
- set;
- }
- }
Step 2
In View model Registration.cshtml,
- @using (Html.BeginForm("Registration", "Login", FormMethod.Post, new {onsubmit="ValidateUser();"}))
- {
- <div class="form-group">
- <label for="First Name" class="col-md-3 control-label">First Name</label>
- <div class="col-md-9">
- @Html.TextBoxFor(x => x.FirstName, "", new { @class = "form- control", placeholder = "First Name" })
- @Html.ValidationMessageFor(x => x.FirstName, "Please enter First Name", new { @class = "text- danger", style = "display:none" })
- </div>
- </div>
- <br />
- <div class="form-group">
- <label for="firstname" class="col-md-3 control-label">Last Name</label>
- <div class="col-md-9">
- @Html.TextBoxFor(x => x.LastName, "", new { @class = "form-control", placeholder = "Last Name" })
- @Html.ValidationMessageFor(x => x.LastName, "Please enter Last Name", new { @class = "text- danger", style = "display:none" })
- </div>
- </div>
- <br />
- <div class="form-group">
- <label for="lastname" class="col-md-3 control-label">Email</label>
- <div class="col-md-9">
- @Html.TextBoxFor(x => x.Email, "", new { @class = "form-control", placeholder = "Email" })
- @Html.ValidationMessageFor(x => x.Email, "Please enter Email", new { @class = "text- danger", style = "disp lay:none" })
- </div>
- </div>
- <br />
- <div class="form-group">
- <label for="password" class="col-md-3 control-label">Password</label>
- <div class="col-md-9">
- @Html.PasswordFor(x => x.Password, new { @class = "form- control", placeholder = "Password", onblur = "Pass wordStrength();" })
- @Html.ValidationMessageFor(x => x.Password, "Please enter Password", new { @class = "text- danger", style = "display:none" })
- </div>
- </div>
- <br />
- <div class="form-group">
- <label for="password" class="col-md-3 control-label">Contact</label>
- <div class="col-md-9">
- @Html.PasswordFor(x => x.Contact, new { @class = "form-control", placeholder = "Password" })
- @Html.ValidationMessageFor(x => x.Contact, "Please enter Contact", new { @class = "text- danger", style = " display:none" })
- </div>
- </div>
- <div class="form-group">
- <span id="spnMessage" class="text-danger">@TempData["Message"]</span>
- <br />
- <!-- Button -->
- <div class="col-md-offset-3 col-md-9">
- <button id="btn-signup" type="submit" class="btn btn-info"><i class="icon-hand-right"></i> Sign Up</button>
- <span style="margin-left:8px;"></span>
- </div>
- </div>
- }
Step 3 - jQuery code
Using this jQuery code, we can validate before submitting the form to the server.