ASP.Net Core: Unobtrusive validation not working

22.3k Views Asked by At

The client side validation in ASP.Net Core (Unlike ASP.Net MVC 5) is not working. I have the following code:

public class CountryModel{
    [Required]
    public String Title {get; set;}
}

and in my view page

using(Html.BeginForm()){
   @Html.LabelFor(x=> x.Title)
   @Html.ValidationMessageFor(x=> x.Title)
   @Html.EditorFor(x=> x.Title)
   <Button>Add</Button>
}

with the following scripts added to the end of the page:

...
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>  
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

But it fails. I have check the script through viewing the source in my browser and the scripts have been loaded properly. I have pointed a break point to my Action API to double check, and any time the add button is pressed I reach the break point meaning the client side validation fails.

Is there any additional configuration in ASP.Net Core?? Because this approach works just fine in MVC 5.

3

There are 3 best solutions below

0
On

In my case the problem was quite different.

The validation scripts references were located in the default/built in _ValidationScriptsPartial.cshtml that I was just adding to my page by adding

@section Scripts 
{
     <partial name="_ValidationScriptsPartial"/>    
}

at the end of my View cshtml.

I could see that it was referenced properly in Developer Tools, so I thought it's all fine:

enter image description here

However, it turned out that the paths in _ValidationScriptsPartial were not correct! As you can see, there is only minified version available... and in the case of the second one, a dist subfolder is missing.

enter image description here

It was quite surprising, giving this was a boilerplate code that I did not touch.

0
On

In My case I forgot to download Jquery, please note to let the jquery validation work, make sure you have all below scripts installed in wwwroot folder in the same order..

wwwroot folder

https://i.stack.imgur.com/eiUoK.png

Ordering of scripts in _Layout file

enter image description here

0
On

Please make sure your validation-related scripts are placed under the environment which you are using. Development Or Production.

I was struggling for some time and when I checked my script it was placed in the development section and my app was running using the production environment.

Once I placed the scripts under production it started working !