I'm writing a simple web app with ASP.NET Core 6 and I want to use jQuery validation.
I include jQuery, jquery-validate and jquery-validation-unobstrusive in wwwroot, then I include them in my _Layout.cshtml:
@using LinarLedManagement.Extensions;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - LinarLedManagement</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/LinarLedManagement.styles.css" asp-append-version="true" />
<script src="~/jquery/jquery.js"></script>
<script src="~/jquery-validate/jquery.validate.min.js"></script>
<script src="~/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script src ="~/js/bundle.min.js"></script>
</head>
<style>
html, body { height: 100%; }
</style>
<body style="height:100%; width:100%;">
<header>
<!-- aqui va el partial view del menu-->
</header>
<div class="container-fluid w-100 h-100">
@RenderBody()
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Then I created a simple view:
@model LoginModel
<script>
let login = new Login();
</script>
<div class="container h-100 d-flex align-items-center justify-content-center">
@using(Html.BeginFormPostWithID("Login","Login","loginForm")){
<div class="card" style="width:25rem">
<div class="card-body">
<div class="row mb-3">
@Html.LabelFor(m=>m.UserName,new {@class = "col-sm-4 col-form-label"})
<div class="col-sm-8">
@Html.TextBoxFor(m=>m.UserName,new {@class = "form-control"})
</div>
</div>
<div class="row mb-3">
@Html.LabelFor(m=>m.Password,new {@class = "col-sm-4 col-form-label"})
<div class="col-sm-8">
@Html.PasswordFor(m=>m.Password,new {@class = "form-control"})
</div>
</div>
<div class="row d-flex justify-content-center">
<input type="button" class="btn btn-primary align-self-center col-sm-4" value ="@Resources.Resource.Login" onclick="login.submit()"/>
</div>
</div>
</div>
}
</div>
With a Typescript file:
class Login() {
constructor() {
LoginValidation.validateLoginFields();
}
public submit() {
$('#loginForm').validate();
}
}
class LoginValidation {
constructor() { }
public static validateLoginFields() {
$('#UserName').rules("add", {
required: true
});
$('#Password').rules("add", {
required: true
});
}
}
But when I click in the button it always get a
Uncaught TypeError: $(...).validate is not a function...
And this is the wwwroot structure:
Could someone help me please?
Like Sparky said in the comment, the problem was that I was including twice jQuery (once in the head and another in the body) I just delete the include of the body and it works now!
