locked
Uncaught TypeError: $(...).validate is not a function. Client side validation RRS feed

  • Question

  • User-501297529 posted

    Getting this error trying to use client side validation. This doesn't do any validation. I did an inspect on the page and get the validate is not a function. What am I missing?

    $(document).ready(function () {
    
      
        $('form[id="createdor"]').validate({
            rules: {
                title: 'required'
                
            },
            messages: {
                title: 'This field is required'
            },
            submitHandler: function (form) {
                form.submit();
            }
        });
        
    });
    

    form/view:

    <div class="row">
    <div class="col-md-7 order-md-8">
    <partial name="_StatusMessage" model="@statusMessage" />
    <form id="createdor" method="post" enctype="multipart/form-data" asp-controller="Dor" asp-action="CreateDor" asp-area="Admin">
    <div class="row">
    <div class="col-md-12">
    <h2>@ViewData["Title"]</h2>
    <hr />
    </div>
    </div>
    <div class="form-group col-md-8 col-lg-4">
    <label class="control-label">Title</label>
    <input id="title" type="text" asp-for="Title" name="title" class="form-control" />
    </div>
    <div class="form-group col-md-8 col-lg-4">
    <label class="control-label">As Of</label>
    <div class="input-group date" id="asof" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#asof"
    asp-for="AsOf" />
    <span class="input-group-addon" data-target="#asof" data-toggle="datetimepicker">
    <span class="fa fa-calendar"></span>
    </span>
    </div>
    </div>
    
    <div id="create_submit" class="form-group col-md-12">
    <input type="submit" value="Save" class="btn btn-forum col-sm-12 col-md-2 col-lg-2" />
    </div>
    </form>
    </div>
    
    
    </div>
    
    @section Scripts
    {
    <partial name="_ValidationScriptsPartial" />
    }

    _ValidationScriptsPartial

    <environment include="Development">   
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    </environment>

    Monday, January 27, 2020 4:05 PM

Answers

  • User475983607 posted

    I provided 3 different working examples using the standard MVC template in your other thread with the same subject.

    https://forums.asp.net/t/2163519.aspx?Client+side+unobtrusive+validation

    Here's one more examples that uses CDNs to download  jQuery and jQuery validation libraries without the layout file. Only the necessary files to get jQuery validation working.  

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
    </head>
    <body>
    
        <h1>Index</h1>
        <hr />
        <div class="row">
            <div class="col-md-4">
                <form id="myform" asp-action="Index">
                    <div class="form-group">
                        <label for="name">Required: </label>
                        <input type="text" id="name" name="name" />
                    </div>
                    <div class="form-group">
                        <input type="submit" value="Create" class="btn btn-primary" />
                    </div>
                </form>
            </div>
        </div>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
        <script>
            $(function () {
                $("#myform").validate({
                    rules: {
                        name: {
                            required: true,
                            minlength: 2,
                            maxlength: 5
                        }
                    },
                    messages: {
                        name: {
                            required: "The Name field is required.",
                            minlength: "The name must be at least 2 characters.",
                            maxlength: "The name must be less than 5 characters."
                        }
                    }
                });
            });
    
        </script>
    </body>
    </html>

    Use the browser's developer tools to debug, as recommend several times, if you are still having issues.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 27, 2020 7:01 PM

All replies

  • User475983607 posted

    Getting this error trying to use client side validation. This doesn't do any validation. I did an inspect on the page and get the validate is not a function. What am I missing?

    It looks like you are adding the unobtrusive validation twice.

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

    And

    <environment include="Development">   
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    </environment>

    The browser's dev tools shows the js file you are loading.  Make sure you are not adding duplicate js libraries.

    Monday, January 27, 2020 4:10 PM
  • User-501297529 posted

    mgebhard

    bootzilla

    Getting this error trying to use client side validation. This doesn't do any validation. I did an inspect on the page and get the validate is not a function. What am I missing?

    It looks like you are adding the unobtrusive validation twice.

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

    And

    <environment include="Development">   
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    </environment>

    The browser's dev tools shows the js file you are loading.  Make sure you are not adding duplicate js libraries.

    OK. I have _ValidationPartialScripts.cshtml in 3 places in my solution: ../Identity/Pages/, ../Identity/Views, and ../Views/Shared. The one that I'm including in this view is ../Views/Shared.

    The other two (./Identity/Pages/, ../Identity/Views) consist of

    <environment include="Development">
        <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
        <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
    </environment>
    <environment include="Production,Staging,QA">
        <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
        <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
    </environment>

    I'm not sure what you mean by using twice. I'm including that file once in that view.

    Monday, January 27, 2020 4:45 PM
  • User-501297529 posted

    bootzilla

    Getting this error trying to use client side validation. This doesn't do any validation. I did an inspect on the page and get the validate is not a function. What am I missing?

    It looks like you are adding the unobtrusive validation twice.

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

    And

    <environment include="Development">   
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    </environment>

    The browser's dev tools shows the js file you are loading.  Make sure you are not adding duplicate js libraries.

    I removed one of these scripts and still get the same error.

    <environment include="Development">   
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      
    </environment>

    Monday, January 27, 2020 6:32 PM
  • User475983607 posted

    I provided 3 different working examples using the standard MVC template in your other thread with the same subject.

    https://forums.asp.net/t/2163519.aspx?Client+side+unobtrusive+validation

    Here's one more examples that uses CDNs to download  jQuery and jQuery validation libraries without the layout file. Only the necessary files to get jQuery validation working.  

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
    </head>
    <body>
    
        <h1>Index</h1>
        <hr />
        <div class="row">
            <div class="col-md-4">
                <form id="myform" asp-action="Index">
                    <div class="form-group">
                        <label for="name">Required: </label>
                        <input type="text" id="name" name="name" />
                    </div>
                    <div class="form-group">
                        <input type="submit" value="Create" class="btn btn-primary" />
                    </div>
                </form>
            </div>
        </div>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
        <script>
            $(function () {
                $("#myform").validate({
                    rules: {
                        name: {
                            required: true,
                            minlength: 2,
                            maxlength: 5
                        }
                    },
                    messages: {
                        name: {
                            required: "The Name field is required.",
                            minlength: "The name must be at least 2 characters.",
                            maxlength: "The name must be less than 5 characters."
                        }
                    }
                });
            });
    
        </script>
    </body>
    </html>

    Use the browser's developer tools to debug, as recommend several times, if you are still having issues.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 27, 2020 7:01 PM