Client side & Server side validations in ASP.NET MVC

Question

In the ViewModel, I have Data Annotations for few fields.

public class EmployeeContactInfoVM
{

[Key]
public int slNo { get; set; }

[Required]
[Display(Name = "Employee GlobalView ID *")]
[StringLength(8,MinimumLength = 8,ErrorMessage ="GV ID should be 8 digits")]
[RegularExpression(@"^[0-9]+$", ErrorMessage = "Please use Numeric data")]
public string EmployeeID { get; set; }

[Required]
[Display(Name = "First Name *")]
[RegularExpression(@"^[a-zA-Z]+[ ]*[a-zA-Z]*$", ErrorMessage = "Please use letters")]
public string FirstName { get; set; }

}

My View code is given below

@model EmployeeContactInformation.ViewModel.EmployeeContactInfoVM
@using EmployeeContactInformation.Classes;
@{
  ViewBag.Title = "Index";
}
@section Scripts
{
  <script src="https://www.google.com/recaptcha/api.js?render=@ViewBag.SiteKey"></script>
  <script>
      function CreateToken() {
          $.blockUI();
          grecaptcha.execute('@ViewBag.SiteKey', { action: 'homepage' }).then(function (token) {
              document.getElementById("tokenID").value = token;
              document.EmpContactFrm.submit();
      });
    }
  </script>
}

@using (Html.BeginForm("Index", "EmployeeContactInformation", FormMethod.Post, new { name ="EmpContactFrm", id = "EmpContactFrmID" }))
{
  <div class="form-horizontal" role="form">
    <hr />
    @Html.ValidationSummary(true)

    <input type="hidden" id="tokenID" name="token" />

    <div class="form-group" style="margin-bottom:5px">
        @Html.LabelFor(model => model.EmployeeID, new { @class = "col-md-2 editor-label" })
        <div class="col-md-10 inputText">
            @Html.TextBoxFor(model => model.EmployeeID, htmlAttributes: new { @title = "Employee 
            GlobalView ID should consist of 8 digits and in some countries it may start with a leading 
            zero" })
            @Html.ValidationMessageFor(model => model.EmployeeID, "", new { @class = "text-danger" })
        </div>
    </div>


    <div class="form-group">
        @Html.LabelFor(model => model.FirstName, new { @class = "editor-label col-md-2" })
        <div class="inputText col-md-10">
            @Html.TextBoxFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)

        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.SurName, new { @class = "editor-label col-md-2" })
        <div class="col-md-10 inputText">
            @Html.TextBoxFor(model => model.SurName)
            @Html.ValidationMessageFor(model => model.SurName)
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-10">
            <input type="button" value="Submit" class="btn btn-create btnSave" style="font-size: 
             large;font-weight: 600;padding: 10px;" />
        </div>
    </div>
}

The form gets submitted in CreateToken function ( document.EmpContactFrm.submit(); ).

I am assuming that all of the validations happen at client Side as I have included in configuration file.

Some of the validation happen at Client side for e.g If I input 7 digit EmployeeID, I get an message saying "GV ID should be 8 digits".

When I submit the form without entering for mandatory fields, client Side validation doesn't work, the control comes to Action Method.

I have included Server Side Validation like if(ModelState.IsValid) in the code, this will now throw validation error when I miss Mandatory fields.

Do I need to include validation at both Server & Client End? I was assuming that if we include jquery unobtrusive file & the above mentioned config settings, validations can be purely at client side.

Please let me know

comments this line because its form tag inside form tag so it might creating some conflict. Try to comment and let us know result — Jigar Sangoi, Apr 12 '20 at 06:41
It didn't work. client side validations are not working when I submit the form, where as it works when I input wrong data for FirstName( numeric data in FirstName) — Arun kumar M, Apr 12 '20 at 14:57

score 0 · Answer 1 · answered Apr 12 '20 at 15:13

0

Change this line from

 @Html.ValidationSummary(true)

to

 @Html.ValidationSummary()

Read this answer

answered Apr 12 '20 at 15:13

Jigar Sangoi

159
6

Yes...I tried your solution...It didn't meet my requirements When I hit submit button, the postback call happens & server side validation takes place. Is there a way to avoid postback call? and achieve 100% client side validation – Arun kumar M Apr 24 '20 at 15:54

Client side & Server side validations in ASP.NET MVC

1 Answers1