ASP.NET Core: jquery.validate.js is not working when used with another <script> tag

Question

Using VS2017, I've created an ASP.NET MVC Core 1.1.1 app by using a default ASP.NET Core Web Application template with Individual User Account mode. As we know VS2017 creates and configures all necessary css and javascripts files inside the project by default. The validation is working fine on both client side and server side accept when I use an javascript along with jquery.validate.js as shown below:

Observations

When I enter a correct value (of type float) in input box, the form submits successfully and the value gets inserted into the SQL db. But intentionally if I enter a string, say, abc the client-side error does not occur but on post action, as expected, ModelStat.IsValid returns false and hence the data does not get inserted into the db.
On the source view (shown below) of the page (or using F12), I can see the jquery.validate.js is loaded correctly
I've tried loading jquery.validate.js before <script>...<\script> and then moving it to after <script>...<\script> but jquery.validate.js loads successfully yet client-side validation still does not work.

View

@model MyProj.Models.MainViewModel
 ...
<div class="form-group">
 <label asp-for="Price"></label>
 <div class="col-md-10">
    <input asp-for="Price" class="form-control"></input>
    <span asp-validation-for="Price" class="text-danger"></span>
 </div>
 </div>
 <div>
   <button type="submit" name="submit"...>GO</button>
 </div>

@section scripts
{  
   @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
   <script>
     $(document).ready(function () {
     ...
     ...
     });
   </script>
}

Page Source View

...
<div class="col-sm-2">
    <small class="input-group-addon">$</small>
    <input class="form-control text-right" type="text" data-val="true" data-val-number="The field Price must be a number." id="Price" name="Price" value="">
    <span class="text-danger field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
</div>
...
</div>
...
       <script src="/lib/jquery/dist/jquery.js"></script>
       <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
       <script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"></script>


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


  <script>
    $(document).ready(function () {
    ...
    ...
   });
 </script>

@JoeAudette That was a typo in the Page Source View part of the post - I've corrected that. Thank you for pointing it out. — nam
– nam, Commented Sep 2, 2017 at 17:00
are you getting any script errors on the page? do you have annotations for validation on your view model? you should show your view model and also your view at least partially in your question — Joe Audette
– Joe Audette, Commented Sep 2, 2017 at 18:05
are you saying it works as expected if you leave out the last script element? if so probably need to know more about what that script does since it seems to break it — Joe Audette
– Joe Audette, Commented Sep 2, 2017 at 18:06
yeah code looks ok, nothing jumps out at me as wrong. partial view is ok unless it is loaded by ajax that might make it miss out on getting wired up unobtrusively. on page load the unobtrusive script should see the data- attributes and wire up the validation, but if loaded by ajax after page load that could explain the problem. if the partial view is rendered during initial page load it should work — Joe Audette
– Joe Audette, Commented Sep 2, 2017 at 20:54

Hatef. · Accepted Answer · 2018-12-09 12:08:25Z

2

Its too late but hope this help you

use unobtrusive too like this :

@section scripts{
    <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
}

answered Dec 9, 2018 at 12:08

Hatef.

5445 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

ASP.NET Core: jquery.validate.js is not working when used with another <script> tag

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