0

I am trying to use client side validation and its not working. My model is:

 [Required]
      [DataType(DataType.EmailAddress)]
      public string Email { get; set; }

my layout used by the view has:

 <script src="~/js/jquery-3.6.0.min.js" 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>

my view has:

 <div class="form-group">
        <label asp-for="Email"></label>
        <input asp-for="Email" class="form-control" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>

when I check the form html in the browser it shows:

<div class="form-group">
        <label for="Email">Email</label>
        <input class="form-control" type="email" data-val="true" data-val-required="The Email field is required." id="Email" name="Email" value="">
        <span class="text-danger field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
    </div>

but when I click the submit button, the form is been posted to the server which means the client side validation is not working.

fake2608
  • 3
  • 3
  • Are you *absolutely sure* that those jQuery scripts actually loaded? Do they appear okay in your browser's dev tools' Network window? – Dai Aug 04 '21 at 11:09
  • when I check the head section of the page in the browser I see tags for the 3 scripts in the head section – fake2608 Aug 04 '21 at 11:12
  • I didn't ask you to check the rendered HTML, I asked you to check the Network tab of your browser's dev-tools to see if the script requests failed or if your browser blocked loading it, perhaps due to some defined CSP. – Dai Aug 04 '21 at 11:13
  • I just tried refreshing the page with the network tab open and I can see the scripts are been loaded – fake2608 Aug 04 '21 at 11:16
  • Does this answer your question? [Uncaught TypeError: Cannot set property 'unobtrusive' of undefined](https://stackoverflow.com/questions/7911439/uncaught-typeerror-cannot-set-property-unobtrusive-of-undefined) – phuzi Jun 22 '23 at 20:28

2 Answers2

0

For some reasons you have to add asp-validation-summary just below form tag

<form id="myForm">

<div asp-validation-summary="ModelOnly" class="text-danger"></div>
.....
.....
</form>
Serge
  • 40,935
  • 4
  • 18
  • 45
  • I already have a asp-validation-summary below my form tag like:
    – fake2608 Aug 04 '21 at 13:45
  • @fake2608 try to change it to "ModelOnly" – Serge Aug 04 '21 at 13:49
  • I just tried ModelOnly and the form is still being posted to the server – fake2608 Aug 04 '21 at 14:08
  • Thank you all for your help. The problem was that I was loading the unobtrusive script before the jquery.validate sceipt. Found the solution here https://stackoverflow.com/questions/7911439/uncaught-typeerror-cannot-set-property-unobtrusive-of-undefined – fake2608 Aug 04 '21 at 14:13
0

The solution is that you should load the jquery.validate script before the unobtrusive script. Found the answer here Uncaught TypeError: Cannot set property 'unobtrusive' of undefined

fake2608
  • 3
  • 3