CODEWITHSUNDEEP
javascriptasp.netasp.net-core
fake2608
fake2608

Reputation: 13

Client Side Validation not working in Asp.Net Core

I am trying to use client side validation in my application but its not working. Only server side validation is working. The validation works after the form is posted to the server. I have the following scripts in my head section of the layout

<script src="~/js/jquery-3.6.0.min" type="text/javascript"></script>
<script src="~/js/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="~/js/jquery.validate.js" type="text/javascript"></script>

I have used browser developer tools and the scripts are shown in the head section of the page. when I click the submit button in the form the form is being submitted and only afterwards the errors show.

The form is as follows:

<form asp-action="Create">  

    <div class="form-group">
        <label asp-for="@Model.Title"></label>
        <textarea asp-for="@Model.Title" rows="3" class="form-control"></textarea>
        <span asp-validation-for="@Model.Title" class="text-danger"></span>
    </div>

    <div class="text-center">
        <button class="btn btn-primary form-btn-margin-top" type="submit">Create</button>
    </div>
           
</form>

The model class is

public class Material
{
    public int Id { get; set; }

    [Required]
    public string Title { get; set; }
}

Upvotes: 0

Views: 883

Answers (1)

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

Update to place the .js on the end of the jQuery path. Also remove the attribute for type="text/javascript" all modern browsers have that as a default and it will generate a warning on validation for example here: https://validator.w3.org/

<script src="~/js/jquery-3.6.0.min.js"></script>
<script src="~/js/jquery.validate.unobtrusive.min.js"></script>
<script src="~/js/jquery.validate.js"></script>

Upvotes: 1

Related Questions