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
{
// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
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"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
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")
}
