Enable client side validation in ASP.NET MVC

[tonylck]

I enable client side validation in ASP.NET MVC

1) Add the following entries to Web.config
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

2) Add JavaScript files
<script type="text/javascript" src="@Url.Content("~/Scripts/lib/jquery-validation/dist/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js")"></script>

When I try to enter a space character to mandatory field, it cannot return any error message on client side. After I disable client side validation, it can show error message to notify user to input data

Why there is difference between client side validation and server side validation?

In addition, There is no response when I click on submit button. There is no problem when client side validation is disabled

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

if (ViewBag.DisplayMode == "Edit")
{
@Html.HiddenFor(model => model.ID);
}

<div class="form-group">
<label for="groupName">@Html.LabelFor(model => model.Code) <span style="color:red">*</span></label>
@Html.TextBoxFor(model => model.Code, new { id = "txtCode", @class = "form-control", @maxlength = "10", @style = "width:300px" })
<label id="lblMesg"></label>
&nbsp;
@Html.ValidationMessageFor(model => model.Code, null, new { @class = "text-danger" })
</div>
<div class="form-group">
<label for="groupName">@Html.LabelFor(model => model.Desc) <span style="color:red">*</span></label>
@Html.TextBoxFor(model => model.Desc, new { @class = "form-control", @maxlength = "50", @style = "width:600px" })
&nbsp;
@Html.ValidationMessageFor(model => model.Desc, null, new { @class = "text-danger" })
</div>
<div class="row">
<div class="modal-footer">
<button type="button" class="btn btn-light" onclick="location.href='@Url.Action("Index", "Department")';">
<i data-feather="x" class="icons-sm"></i> Cancel
</button>
@if (ViewBag.DisplayMode == "Edit")
{
<button id="btnEdit" type="submit" class="btn btn-success waves-effect waves-light">
<i class="mdi mdi-content-save mr-1"></i> Save
</button>
}
else if (ViewBag.DisplayMode == "Add")
{
<button id="btnAdd" type="submit" class="btn btn-success waves-effect waves-light">
<i data-feather="plus" class="icons-sm"></i> Add
</button>
}
</div>
</div>
}

Continue reading...