Client Side Validation not working in Asp.Net Core

Question

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; }
}

you're loading the scripts without an issue, but not sure if you are invoking it(Hard to tell from your code). This link has all the documentation and shows you how to invoke methods and use it jqueryvalidation.org — SRK45
– SRK45, Commented Jul 15, 2021 at 15:45
But in asp.net core you don't need to write any additional code for client side validation to work. just the data annotations in the model class which are the same for server side validation — fake2608
– fake2608, Commented Jul 15, 2021 at 15:49
Could you add the form and the model that you are validating? — Ali
– Ali, Commented Jul 15, 2021 at 15:53
I have edited the question and added the model and form. also please note that only server side validation is already working — fake2608
– fake2608, Commented Jul 15, 2021 at 16:06
This really looks wrong, perhaps <script src="~/js/jquery-3.6.0.min" type="text/javascript"></script> did you mean <script src="~/js/jquery-3.6.0.min.js" type="text/javascript"></script> — Mark Schultheiss
– Mark Schultheiss, Commented Jul 15, 2021 at 16:10

Mark Schultheiss · Accepted Answer · 2021-07-15 16:20:07Z

1

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>

answered Jul 15, 2021 at 16:20

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Client Side Validation not working in Asp.Net Core

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related