Getting an error that the valid() function does not exist when attempting to call a JS function?

Currently, I am utilizing jquery validate libraries to perform validation checks prior to making an ajax call. However, encountering an issue where it states that valid() is not a recognized function.

Even after including the necessary jquery validate libraries for my form with the id of 'share' and implementing two separate ajax calls for row updates and bulk updates, the error persists.

Below are the jquery validate libraries being used:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"</script>

var RowId = 0;
    var tagvalue = 0;
        function UpdateRow(id)
        {
            tagvalue = $("#TagVaule_" + id).val();
            RowId = id;
            if ($("#share").valid())
            {
                DisplayModal();
            }
            else
            {
                return false;
            }
        }

        function DisplayModal()
        {

             $.ajax({
                type: "GET",
                 url: '@Url.Action("Update","Home")',
                data: {
                    id: RowId,
                    value: tagvalue
                },
                success: function(data)
            {
                $('#myModalContent').html(data);
                $('#myModal').modal('show');
            }
            });

        }

<form id="share">
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="container col-md-12">
    <table id="myTable" class="table table-hover table-striped table-bordered dataTable">
        <thead>
            <tr>
                <th style="text-align:center">@Html.DisplayNameFor(m => Model.tags.First().Id)</th>
                <th style="text-align:center">@Html.DisplayNameFor(m => Model.tags.First().TagName)</th>
                <th style="text-align:center">@Html.DisplayNameFor(m => Model.tags.First().TagCategory)</th>
                <th style="text-align:center">@Html.DisplayNameFor(m => Model.tags.First().TagValue)</th>
                <th style="text-align:center">Action</th>
            </tr>
        </thead>
        <tbody>
            @for (int i = 0; i < Model.tags.Count(); i++)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(m => Model.tags[i].Id)
                        @Html.HiddenFor(m => Model.tags[i].Id)
                    </td>
                    <td>
                        @Html.DisplayFor(m => Model.tags[i].TagName)
                    </td>
                    <td>
                        @Html.DisplayFor(m => Model.tags[i].TagCategory)
                    </td>
                    <td>
                        @Html.EditorFor(m => Model.tags[i].TagValue, new { htmlAttributes = new { @id = "TagVaule_" + Model.tags[i].Id, @class = "form-control",required="required" } })
                        @Html.ValidationMessageFor(m => Model.tags[i].TagValue, "", new { @class = "text-danger" })

                    </td>
                    <td>
                        <button type="button" class="btn btn-danger" onclick="UpdateRow(@Model.tags[i].Id)">Update</button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content" id="myModalContent">

            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-5 col-md-10">
            <button type="button" class="btn btn-danger"   onclick="BulkUpdate()">BulkUpdate</button>
        </div>
    </div>
</div>

Answer №1

Ensure that the page has included jQuery's validator library. If not, please add the following line after the <script> tag for jQuery:

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

Before using any valid() function, remember to run form object's validate() first.

Here is an example of how to do it:

$(document).ready(function(){
    $("form").validate(); // You can use either the id or class as the selector for the form
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Getting data from a URL and passing it as an argument to a ColdFusion function

I am currently utilizing JQuery and AJAX combined with ColdFusion. Within the URL http://mysitedomain.com/something/page.cfm?x=229, there is a value of x that I would like to use as an argument in my ColdFusion function. Could someone kindly explain how I ...

Ensure that the date is valid using Joi without transforming it into UTC format

Is there a method to validate a date using @joi/date without converting it to UTC? I need to ensure the date is valid before storing it in the database. Here's what I've attempted: const Joi = require('joi').extend(require('@joi/ ...

Error: Conditional formatting not compatible with JavaScript detected

I have a jQuery DataTable that is populated with data from a JSON file. Everything works smoothly, but I'm encountering an issue with conditional formatting. The script I'm using assigns a 'positive' class to all cells in column 2, even ...

Exploring the concept of Javascript Objects and the undefined value

I've encountered an issue with a Wordpress plugin that is no longer supported. After some investigation, I have identified the problem area in the code: i[C][0]; The above line seems to be causing an 'undefined' return within the function ...

How to swap out the rel attribute with id in jQuery

Ensuring my webpages are W3C valid is a priority for me. I am taking steps to rectify errors one by one in order to achieve validity. Upon using the HTML5 doctype, an error was flagged. On Line 348, Column 81: it was pointed out that the RDFa Core attribu ...

Securing string parameters in Django templates for JavaScript function usage

Can anyone help me with a JavaScript function that is returning a set of objects? return Func("{{id}}", "{{name}}") I'm encountering an issue when passing strings that contain quotes, such as "Dr.Seuss' "ABC""BOOk"", which leads to invalid synt ...

Unable to stop the default form submission in Vue 3

Using the latest version of Vue 3 I am encountering an issue with preventing form submission. Here is my HTML form: <form id="app" @submit="onSubmit"> <input type="text"> <input type="text"> ...

Nodemailer attachments are missing contents

I'm having trouble attaching files to emails using NodeMailer. When I check the sent email, the attachments appear as empty files with 0 bytes. Even when I download them, they are still empty text files. Can someone please help me identify what I migh ...

Guide to making a GeoJSON Feature object with Typescript and react-leaflet

Attempting to generate a react element from a Feature in Typescript has been unsuccessful for me. (I'm utilizing react-leaflet + Typescript) With regular javascript, the process is as follows: <Map {...} <GeoJSON data={...} < ...

Steps for building JSX with a loop

Recently diving into the world of React and Javascript, I've been attempting to assemble a JSX 'tree' dynamically using a loop rather than hard-coding the data. However, I find myself facing a hurdle where Visual Studio Code insists on havi ...

Determining if an element is present in a JavaScript array and returning true

I've come up with this code so far: var isMatch = viewedUserLikedUsersArray.indexOf(logged_in_user); if (isMatch >=0){ console.log('is match'); } else { console.log('no match'); } When an element is ...

Tips for creating a dynamic system to continuously add more HTML tables in PHP

I am working with an HTML table where the data is retrieved from a database. I need to add new rows to enter additional data, but the numbering does not continue from the last number. My question is how can I increase the numbering in the table. Please ref ...

Utilizing phonegap/jQueryMobile to extract OpenCart products in JSON format is a simple process

Looking to retrieve the product catalog in JSON format from my OpenCart store through a phonegap mobile application using Ajax, JavaScript/jQuery. Is this something that can be done with OpenCart? Any suggestions, ideas, or sample code would be greatly ap ...

Tips on managing the onKeyUp event in a ReactJS form

Here is a simple JavaScript function called numericOdds implemented in home.js file: function numericOdds(e) { var valid = /^[1-9]{1}[0-9]{0,1}$/ var number = /^[1-9]{1}$ | ^[1-9]{1}[0-9]{1}$/ var lastValid = ''; var n; console.log(&apo ...

Steps for dividing the content extracted from `div` tags

I have the following HTML code: <div class="chip">java<span class="material-icons close">×</span></div> <div class="chip">spring<span class="material-icons close">×</span></div> <div class="chip">py ...

Updating the value of a JSON data attribute

I am looking to update a specific value in a JSON array. To provide more context, here is the DOM structure I have: <input class="fileupload" type="file" data-form-data='{"table_reference": "data_monitoring", "table_token" : "X43sd"}'> I ...

Guide to including user-defined headers in Angular's httpRequest

I am attempting to make an http get() request by passing some values in headers. I am currently updating the headers as follows: import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Injectable } from '@angular/core' ...

What is the best way to arrange an array using AngularJs or Javascript?

When a user makes a selection, I want to sort and display an array in alphabetical order. Specifically, when we render data from the backend, I would like to display the fullName in alphabetical order. The $scope.selectedControlOwner is the ng-click event ...

Customize ui-grid.js to display only selected columns

I am working with JSON data from a REST response that contains multiple parameters, some of which are nested. However, I only want to display specific ones. Is there a way to hide all parameters and only show the specific ones I need? Currently, all param ...

determining the preference between setTimeout and setImmediate

After reading the documentation on the node, it mentions: setImmediate(callback, [arg], [...]) This function is supposed to execute callback immediately after I/O events callbacks and before setTimeout and setInterval However, in practice, I noticed tha ...