Having trouble with jQuery validation: Seeking clarification on the error

I have implemented some validations on a basic login page and added jQuery validation upon button click. However, the code is not functioning as expected. I have checked the console for errors but none were displayed. Here is the code for your review:
Can anyone identify the issue?

<!doctype html>
<html>
    <head>
        <title>Login Page</title>
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.validate"></script>

        <script>
            $(document).ready(function(){       
                $("#form").validate({
                    alert("hi");
                    rules: {
                        name: {
                            required: true,
                            midlength: 5,

                        },
                        email: {
                            required: true,
                            email: true,
                        },
                        password: {
                            required: true,
                            midlength: 5,
                            equalTo: "#verify",

                        },
                    }
                });
            });
        </script>

        <style>
            label{
                width: 150px;
                display: inline-block;
            }

            label.error{
                color: red,
            }
        </style>

    </head>

    <body>

        <form id="form">

        <label>Name : </label>
        <input type="text" name="name" /><br/>

        <label>Email : </label>
        <input type="email" name="email"/ ><br/>

        <label>Password : </label>
        <input type="password" name="pass" /><br/>

        <label>Verify Password : </label>
        <input type="password" name="verify" id="verify" /><br/>

        <input type="submit" />

        </form>
    </body>
</html>

Answer №1

Something seems off here:

<script type="text/javascript" src="js/jquery.validate"></script>

Consider using this instead:

<script type="text/javascript" src="js/jquery.validate.min.js"></script>

Verify that the file exists in the js folder with that specific name. It's advisable to check the browser console for any potential errors - at the moment, the code might throw a "jquery.validate not found" message.

Answer №2

At the conclusion of this sentence, a comma is present.

                password: {
                    required: true,
                    midlength: 5,
                    equalTo: "#verify",

                },

This imperfection in syntax disrupts the execution of JavaScript.

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

Rearrange the array so that any empty values are placed at the end

I am trying to arrange all empty values at the end of an array. The code below demonstrates my attempt: 1) This code moves all empty values to the end of the array, but it does not sort the other values accordingly. var dateArray = [ '',&apos ...

File handling in Angular 2 using Typescript involves understanding the fundamental syntax for managing files

Would someone be able to explain the fundamental syntax for reading and writing text files, also known as file handling in TypeScript? If there is a corresponding link that anyone could provide, it would be greatly appreciated. ...

How can I use jQuery AJAX to generate a cookie or session?

In the process of developing my own JavaScript API for an online chat platform, I am looking to create a seamless experience for users by loading CSS and JavaScript files to generate a conversation window on their website. My goal is to make this API avail ...

JavaScript Thumbnail Slider Builder

I've been working hard on developing a custom JavaScript thumbnail slider that uses data-src. Everything seems to be in order, except the next and previous buttons are not functioning properly. Any assistance would be greatly appreciated. Here's ...

What steps can be taken to resolve the issue of Spring Boot not supporting the 'POST' request method?

I have developed an API using spring boot with dependencies such as spring web, JPA, jstl, and MySql. The API includes a Controller, Model, and Repository for performing CRUD operations. In addition to this, I have created a client to consume the API. When ...

What is the best way to loop through a group of WebElements, and only log the results that contain a specific substring?

In my test case, I'm utilizing Mocha to handle the scenario. The test appears to be passing successfully, however, no logs are being printed... it('Is 'Mooooooo!!!! I2MaC0W' a Substring in Results?', function() { this.timeout(50 ...

Having trouble sending a function as a prop to a child component in React

Something odd is happening, I'm confident that the syntax is correct, but an error keeps popping up: Error: chooseMessage is not a function // MAIN COMPONENT import React, { useState } from 'react' export default function LayoutMain(prop ...

Creating a timer implementation in Node.js using Socket.IO

In the process of developing a drawing and guessing game using node.js and socket.io, I have a structure consisting of a Room class, a Game class (which is an extension of Room), and a Round class where each game consists of 10 rounds. During each round, a ...

Can we effectively manage the input for a component that is created dynamically in real-time?

Please note: I am a newcomer to ReactJS, JavaScript, and the world of front-end development in general. Hello everyone, I have made the decision to create a versatile component that can handle all the forms within my project based on a predefined templat ...

Create a function within jQuery that triggers when an option in a select field is chosen

As I edit a podcast, I have encountered a situation where an option is being selected through PHP code. Now, I am looking to implement jQuery functionality for when the option is selected from the select field. I have searched through various questions an ...

What techniques can I employ to ensure that withLatestFrom() effectively interacts with itself?

In my program, I have an intermediate stream that is connected to a source, but it can also trigger events from other sources (such as user input). In another part of my code, there is a derived stream that needs to compare new data from the intermediate w ...

A successful AJAX request in Spring MVC is authenticated

I am facing some issues while trying to send a jQuery AJAX request to my Spring MVC Servlet. I have read several articles, but none of them have been able to help me with my problem :( Here is the AJAX request code snippet in question: $.ajax( ...

React failing to display changes in child components even after using setState

When I delete an "infraction" on the child component, I try to update the state in the parent component. However, the changes do not reflect visually in the child component even though the state is updated. It seems like it's related to shallow update ...

Modal window displaying MVC 4 partial view

I've been attempting to display a partial view using a popup, but it's not working. The controller method is also not being triggered. Here's my code: Script:- $(document).ready(function () { $.ajaxSetup({ cache: false }); ...

Tips for effectively handling requestAnimationFrame

I created a unique function that both scrambles and translates text. The functionality is smooth if you patiently wait for the animation to finish before moving the mouse over to other elements. However, if you try to rush through to the next one, the prev ...

Displaying a base64 image in a new tab with JavaScript on iOS devices

Currently, I am receiving base64 data for an image and would like to open it in a new tab. To achieve this, my code looks something like this: var window = new window(); window.open("<iframe src="+base64Url+"); Interestingly, this method works perfec ...

I am looking to display data in Angular based on their corresponding ids

I am facing a scenario where I have two APIs with data containing similar ids but different values. The structure of the data is as follows: nights = { yearNo: 2014, monthNo: 7, countryId: 6162, countryNameGe: "რუსეთის ...

IE6 Compatibility Issue: jQuery MVC3 AJAX Callback Fails to Update DropDownList

Can anyone help me troubleshoot my jQuery code that updates a drop down list based on another drop down list selection? $("#FirstDropDownList").change(function () { $.get('/MyController/GetSecondDropDownListValues/' + $(this).val(), function ...

Finding repeating elements in an array of objects

Is there a way to identify duplicates in an array based on type, name, and size, increment the amount, and then remove the duplicate entries? [ { "name": "Pizza with pepper", "imageUrl": "...", ...

Troubleshooting the challenges with jQuery's next().addClass() and prev().addClass() functions

I am attempting to create a slider feature. I have four different contents that I've positioned consecutively, but made them invisible initially. I defined a class called active-client with the attribute display: flex. Using jQuery's addClass() m ...