Personals:537 Uncaught TypeError: $(...).valid is not a function
at HTMLInputElement.<anonymous> (Personals:537)
at HTMLInputElement.dispatch (VM224 jquery.js:5183)
at HTMLInputElement.elemData.handle (VM224 jquery.js:4991)
Here is my model. i have added required fields and data annotations, But on the razor field, no data annotations appear. What is wrong here
public class _Users_Accounts_INSERT
{
[Key]
public int AccountID { get; set; }
public Guid UniqueID { get; set; }
public int UserID { get; set; }
[Required(ErrorMessage = "Please enter the first name")]
[StringLength(50, MinimumLength = 2)]
public string First_Name { get; set; }
[Required(ErrorMessage = "Please enter the last name")]
[StringLength(50, MinimumLength = 2)]
public string Last_Name { get; set; }
[Required(ErrorMessage = "Please enter your chosen Username")]
[StringLength(50, MinimumLength = 6)]
public string Username { get; set; }
public string Title { get; set; }
[ForeignKey("ASPNetUsers")]
public string ASPNetID { get; set; }
[ForeignKey("ASPNetUsers")]
[Display(Name = "Email Address")]
[EmailAddress]
[RegularExpression("^[_A-Za-z'`+-.]+([_A-Za-z0-9'+-.]+)*@([A-Za-z0-9-])+(\\.[A-Za-z0-9]+)*(\\.([A-Za-z]*){3,})$", ErrorMessage = "Enter proper email")]
[Required]
[DataType(DataType.EmailAddress, ErrorMessage = "The email is not valid")]
public string Email { get; set; }
[DataType(DataType.PhoneNumber)]
[Display(Name = "Mobile Number")]
public string Mobile { get; set; }
public string Gender { get; set; }
public string Account_Type { get; set; }
}
Even though I put email as a required field, the email value is picked up on the server side and not client side, same goes with the other fields that are not displayed on the client razor page
Finally my layout page
I had added the jquery.js file and the jquery.validate.unobtrusive.js both of which I have highlighted in yellow
The error generally means you are trying to use jQuery validation before jQuery validation is loaded in the browser. Do the normal troubleshooting. Open the browser's dev tools by pressing F12. Look for 404 errors, console errors, and make sure jQuery
validate (or the library you are using) is listed in the Network View.
I think your are not referencing the JS files for validation in proper manner. The correct manner is:
First reference jQuery
Next reference jquery.validate.js
jquery.validate.unobtrusive.js
Take help from this
client side validation tutorial also. Make sure to check the console window for any mission js file error (404).
Helping you always. Don't forget to click "Mark as Answer" on the post that helped you.
♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠
Because you used the unobtrusive script, you need use the unobtrusive attribute syntax to define validation rules, data-val-required=“Message”. Also you need a validation summary, or field validation to display the errors.
If you want to use jquery validation directly, than remove the unobtrusive validation, and define the validations rules, and error display methods. See docs.
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
251 Points
1124 Posts
Simple form validation error - Returns error . $(...).valid is not a function
Jul 25, 2019 10:20 AM|afrika|LINK
hi guys
I am trying to create a form validation, and added the JQUERY files, but getting errors. Main code below is
var form = $('#Add_Form'); // form.validate(); if ($('#Add_Form').valid()) {//Valid alert('1 says -' + form.valid()); // form.focusInvalid(); return false; Dawn(data); } else {//INVALID alert('2 -' + form.valid()); form.focusInvalid(); }
I am trying to validate and focus on the required fields in yellow below
Here is my code
Error message
Here is my model. i have added required fields and data annotations, But on the razor field, no data annotations appear. What is wrong here
Even though I put email as a required field, the email value is picked up on the server side and not client side, same goes with the other fields that are not displayed on the client razor page
Finally my layout page
I had added the jquery.js file and the jquery.validate.unobtrusive.js both of which I have highlighted in yellow
The jquery.validate.min.js already existed
All-Star
43721 Points
18706 Posts
Re: Simple form validation error - Returns error . $(...).valid is not a function
Jul 25, 2019 11:06 AM|mgebhard|LINK
The error generally means you are trying to use jQuery validation before jQuery validation is loaded in the browser. Do the normal troubleshooting. Open the browser's dev tools by pressing F12. Look for 404 errors, console errors, and make sure jQuery validate (or the library you are using) is listed in the Network View.
Participant
1060 Points
732 Posts
Re: Simple form validation error - Returns error . $(...).valid is not a function
Jul 25, 2019 11:17 AM|yogyogi|LINK
I think your are not referencing the JS files for validation in proper manner. The correct manner is:
Take help from this client side validation tutorial also. Make sure to check the console window for any mission js file error (404).
♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠
All-Star
53554 Points
13305 Posts
Re: Simple form validation error - Returns error . $(...).valid is not a function
Jul 25, 2019 02:09 PM|bruce (sqlwork.com)|LINK
If you want to use jquery validation directly, than remove the unobtrusive validation, and define the validations rules, and error display methods. See docs.
Member
251 Points
1124 Posts
Re: Simple form validation error - Returns error . $(...).valid is not a function
Jul 26, 2019 04:05 AM|afrika|LINK
I finally got it to work.
As it worked in my previous projects and when I stripped it down to bare html code it worked.
I removed the Jquery include at the bottom of the _Layout page
<environment include="Development"> @*<script src="~/lib/jquery/dist/jquery.js"></script>*@ <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script> </environment> <environment exclude="Development"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" asp-fallback-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery" crossorigin="anonymous" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js" asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal" crossorigin="anonymous" integrity="sha3 rs5C8PRhcEn3czEjhAO9o"> </script> </environment> <script src="~/js/site.js" asp-append-version="true"></script> @RenderSection("Scripts", required: false) </body> </html>
Contributor
2100 Points
705 Posts
Re: Simple form validation error - Returns error . $(...).valid is not a function
Jul 26, 2019 06:11 AM|Jenifer Jiang|LINK
Hi afrika,
It seems that you have loaded two versions of jquery on your page.
You could try to comment or remove one and it may work.
Reference: https://stackoverflow.com/questions/19823998/jquery-validation-error-validate-is-not-a-function
Best Regards,
Jenifer
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.