The functionality of the jQuery validation plugin is failing to operate as intended

I attempted to implement a basic validation using the jQuery Validation Plugin, but I was unsuccessful. When I click the submit button, nothing happens. Can someone provide assistance with this issue?

I have included the code below:

Thank you in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" />
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnSubmit').click(function () { 
            $('#logform').validate({
                rules: {
                    txtUsr: {
                        required: true

                    },
                    txtPass: {
                        required: true

                    }

                },
                messages: {
                    txtUsr: {
                        required: 'Please enter username'
                    },
                    txtPass: {
                        required: 'Please enter password'
                    }
                }

            });

        });

        });

    </script>
</head>
<body>
<div id='LoginDiv' style='width:400px;height:300px;background-color:green;'>
    <form method="post" action="" id='logform'>
        User Name : <input type="text" id='txtUsr' name='txtUsr' style='margin-top:12px'/>
        <br/>
        <br/>
        Password : <input type="text" id='txtPass' name='txtPass' /> 
        <br/>
        <br/>
        <input type="submit" id='btnSubmit' value='Submit' />
    </form>
    </div>
</body>
</html>

Answer №1

Instead of calling the validate function within the click event handler, it is better to initialize it during the document ready phase:

$(document).ready(function () {
    $('#logform').validate({
        rules: {
            txtUsr: {
                required: true
            },
            txtPass: {
                required: true
            }
        },
        messages: {
            txtUsr: {
                required: 'Please provide a username'
            },
            txtPass: {
                required: 'Please type in a password'
            }
        }
    });
});

This will automatically handle keyup and submit events for validation.

Answer №2

The issue arises from self-closing script tags.

Give this a try:

http://jsfiddle.net/adiioo7/FFTkJ/

Use

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>

instead of

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js" />

Also, refer to Why are self-closing script tags not functioning?

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

Nested lists with consistent height regardless of the quantity of items

I am currently working on a dropdown multicolumn menu that contains nested lists. My goal is to ensure that all three lists (or columns) have the same height, even if they contain a different number of items. Since the lists are dynamic and the number of i ...

Vuex fails to respond appropriately to intricate data structures

I've recently implemented Vuex to replace the EventBus in my application as the data complexity increased. Within my context, I have a question entity with multiple answers. When a user adds a new answer, I want to display the latest one. However, de ...

Getting access to the parent's ref from child components in Vue/Nuxt can be achieved by using

Incorporating a global confirm modal component into my default layout file has been a challenge. Attempting to access this component from my pages/index.vue has proven to be unsuccessful, as calling this.$refs returns an empty object. While placing the mod ...

What is the best way to adjust the size of an svg with CSS?

Here is a question that may be relevant: How can I resize an SVG? I am interested in resizing the arrow created in SVG using CSS. The linked question achieved this through an HTML directive (viewBox="0 0 32 32") Does anyone have any suggestions? #DIV_ ...

Store the result of the previous AJAX call in a jQuery variable and combine it with the data from the next AJAX response

I am working on a program where I retrieve price values using ajax. My goal is to add the previous price value to the current price value when it is retrieved again. The issue I am facing is that each time I get a new price value, it overrides the previou ...

Tips for evenly spacing Navbar items in Bootstrap 4

Designing a navigation system using Bootstrap for my website. I'm struggling to figure out the best way to space out the navigation link elements on my navbar so that it looks good on both desktop and mobile screens. This is my current navbar code: ...

Tips for preventing the occurrence of undefined when retrieving data?

After fetching data from mongo, I encountered an issue where my useState([]) is initially defined as undefined. Can someone please offer a solution to this problem? const router = useRouter() const {id} = router.query console.log(id) // f ...

What is the best method to create a grey-colored background using CSS?

I'm curious about how they created the background on the page found at The background is not just a plain color - could it be an image that scales to fit the whole page? Or is there some CSS trickery involved? I noticed in the CSS that the body elem ...

`Sending PHP variables to AJAX - A Step-by-Step Guide`

I've been trying to access session variable data within an ajax call, but I'm facing a roadblock. Here's my code snippet. $('#update').click(function(){ var number = $('#num').val(); ...

Information bubble from HERE Maps -

Currently, I am integrating HereMap into my Vue.js application. You can find the code for implementing HereMap in Vue.js here. Next, I need to add an InfoBubble to this map using the code available here. However, I encounter a problem where the InfoBubbl ...

What is the purpose of the "@" symbol when declaring an AngularJS controller in Coffeescript?

Currently, I am following a tutorial to familiarize myself with AngularJS alongside Rails 4. Interestingly, the author demonstrates how to create an Angular controller using the following syntax: @restauranteur.controller 'HomeCtrl', ['$sco ...

Obtain a result value from MySQL in Node.js

I need help retrieving a value from a select SQL query in Node.js. When I try to return the value, it comes back as undefined. I understand that it's an asynchronous function, but I'm struggling with how to handle it. I even tried assigning it to ...

What is the method for extracting search parameters as an object from a URL that includes a hash symbol?

Currently, I am dealing with a URL structured in the following format: https://my-app.com/my-route/someOtherRoute#register?param1="122"&param2="333" While I am familiar with fetching query strings from a standard URL, I am struggli ...

Owl carousel issue: Fixed position not functioning properly

To view the page with the issue, click here I am attempting to make the column (div) day/date headers sticky when they scroll out of view so that users can always see what day they are looking at. Instead of directly manipulating the header itself, I have ...

Set a breakpoint as soon as the end of a line is identified

I am currently working on a project using React.js and Typescript. Within one of my components, the render looks like this: <div class="test"> Hello dear Sam </div> I am looking for a way to manually instruct the code that if ...

Colorbox now has the ability to load all colorboxes that were previously

After successfully creating a colorbox, I encountered a problem: when I close it and open another colorbox on the page, both colorboxes load simultaneously (with the first one appearing directly behind the second). This pattern continues as I open and clos ...

Using React Material UI icon within an auto complete feature

https://i.stack.imgur.com/W3CmF.png I am struggling to incorporate the target icon into the autoComplete component. After reviewing the documentation, I have been unable to find a solution. In TextInput, a similar outcome can be achieved by implementing ...

The npm install command failed due to a lack of suitable versions for pinkie-promise

I am currently attempting to perform a straightforward "npm install" from one of the repositories mentioned in a tutorial provided here Below is the content of the package.json: { "name": "react-playlist", "version": "1.0.0", "description": "A basi ...

Creating visually appealing definition lists

My goal is to customize the appearance of a shopping cart that is created by a rigid system where I cannot modify the html code. The categories list is generated in the following manner: <dl id='dlCatLvl1' class='clsCatLvl1 clsOffCat1&ap ...

Background not covering full height despite setting HTML and body heights to 100%

I've been struggling to set my wrapper to 100% height, despite setting the height to 100%. Any solutions? At the moment, my main_wrapper is empty and should have a background color of red. While I'm looking to add a footer using position: fixed ...