I'm using jquery.validate library to validate the form on the client side but the errors don't show up. they are showing only after the form hits the server in the model state. Anyone can advise if I'm missing anything in the below code?
This is my bundle.config file
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/focus").Include("~/Scripts/loginfocus.js"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrapGold.css",
"~/Content/myown.css"));
}
}
This is the layout page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Lazurde</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="preloader">
<div class="lds-ripple">
<img src="~/images/loading.gif" class="bg-primary" />
</div>
</div>
<div class="container body-content">
@RenderBody()
<footer class="fixed-bottom">
<p>© @DateTime.Now.Year -Developed & Maintained by Lazurde IT Department</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script>
$(".preloader").fadeOut();
</script>
@RenderSection("scripts", required: false)
</body>
</html>
And finally, this is the view.
@model CegidCustomerRegistration.Models.Registration
@{
ViewBag.Title = "Customer Registration";
}
<script src="https://kit.fontawesome.com/a81368914c.js" > </script >
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet" >
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="row" style="padding-top:10px">
<div class="col-md-12">
@if (TempData["Msg"] != null)
{
<div class="alert alert-success">@TempData["Msg"].ToString()</div>
}
</div>
</div>
<div class="form-container">
<div class="formBox">
<div class="row">
<div class="col-md-6">
<div class="inputBox ">
<div class="inputText">First Name</div>
<input type="text" name="FirstName" class="input">
@Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
</div>
</div>
<div class="col-md-6">
<div class="inputBox">
<div class="inputText">Last Name</div>
<input type="text" name="LastName" class="input">
@Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="inputBox">
<div class="inputText">Email</div>
<input type="text" name="Email" class="input">
@Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
</div>
</div>
<div class="col-md-6">
<div class="inputBox">
<div class="inputText">Mobile(05XX)</div>
<input type="text" name="ContactNo" class="input">
@Html.ValidationMessageFor(model => model.ContactNo, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" name="" class="button" value="Add Customer">
</div>
</div>
</div>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/focus")
}
