Javascript form validation with jQuery is not working sometimes

Question

This is my Login.php

I used a javascript to use some validation on my Login but sometimes it doesn't work and sometimes it does. I can't find the problem in my code.

This is the head.php

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

What can I do to make it work all the time?

<div class="widget">
   <h2>Login</h2>
   <div class="inner">
      <script type="text/javascript">
         $().ready(function() {
             // validate signup form on keyup and submit
             $("#login").validate({
                 rules: {
                     password: {
                         required: true,
                         minlength: 8,
                         maxlength: 15
                     },
                     username: {
                         required: true,
                         minlength: 3,
                     },
                 },
                 messages:{
                 password:{
                     required: "Password is required.",
                     minlength: "Password must be 8-15 characters only.",
                     maxlength: "Password must be 8-15 characters only."
                 },
                 username:{
                     required: "Username is required",
                     minlength: "Username must be 2 or more characters."
                 },
                 }
             });
         });
      </script>
      <style type="text/css">
         form.cmxform label.error, label.error {
         /* remove the next line when you have trouble in IE6 with labels in list */
         padding-top:3px;
         color: red;
         font-style: italic;
         font-size: 11px;
         float: none;
         text-align: left;
         margin-left:5px;
         width: 100px;
         }
      </style>
      <form name="login" id="login" class="cmxform" action="login.php" method="post">
         <ul id="login">
            <li>
               Username:<br>
               <input style="width:100%" type="text" name="username">
            </li>
            <li>
               Password:<br>
               <input style="width:100%" type="password" name="password">
            </li>
            <li>
               <input type="submit" Value="Login">
            </li>
            <li></li>
         </ul>
      </form>
   </div>
</div>

You can add the script in after form. not sure about $().ready function — Ankur Aggarwal, Mar 05 '14 at 07:00

score 6 · Answer 1 · edited Mar 05 '14 at 07:28

6

Add document in your code like this.

$(document).ready(function(){
    //Your Code Logic;
});

edited Mar 05 '14 at 07:28

Martin Thoma

124,992
159
614
958

answered Mar 05 '14 at 07:01

Sanjay

1,958
2
17
25

I tried adding it and refreshed the browser but it still not appearing This was still working yesterday though..i wonder whats the problem – user3382259 Mar 05 '14 at 08:15

score 1 · Answer 2 · edited Mar 05 '14 at 07:17

1

Try add "document" to function

$().ready(function(){/*implementation*/});

change to

$(document).ready(function(){/*implementation*/});

edited Mar 05 '14 at 07:17

Talha Ahmed Khan

15,043
10
42
49

answered Mar 05 '14 at 07:02

Naresh Goud

41
3

score 0 · Answer 3 · answered Mar 05 '14 at 07:02

use document as a parameter to be passed to the ready event.

$().ready() should be changed to $(document).ready()

From doc:

All three of the following syntaxes are equivalent:

$( document ).ready( handler )
$().ready( handler ) (this is not recommended)
$( handler )

score 0 · Answer 4 · answered Mar 05 '14 at 07:05

0

Try this type:

$(function(){
///////your code.........
});

answered Mar 05 '14 at 07:05

Mr.G

3,413
2
16
20

score 0 · Answer 5 · edited May 23 '17 at 12:10

Answer: Wait for DOM

Just as Sanjay wrote, the correct answer / solution to your question / problem is

$(document).ready(function(){
    //Your Code Logic;
});

ready makes sure that your code gets executed after the DOM is ready (see Manual).

Suggestion: HTML5 form validation

I recommend using HTML5 attributes:

required
maxlength
pattern to get minlength

They are relativley save to use (caniuse) and don't require JavaScript.

The following HTML5 is valid according to the W3C validator.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>a</title>
        <style type="text/css">
            form.cmxform label.error, label.error {
                /* remove the next line when you have trouble in IE6 with labels in list */
                padding-top:3px;
                color: red;
                font-style: italic;
                font-size: 11px;
                float: none;
                text-align: left;
                margin-left:5px;
                width: 100px;
            }

            #username, #password {
                width:100%;
            }
        </style>
  </head>
  <body>
    <div class="widget">
       <h2>Login</h2>
       <div class="inner">
          <form name="login" id="login" class="cmxform" action="login.php" method="post">
             <ul>
                <li>
                   Username:<br/>
                   <input id="username" type="text" name="username" required pattern=".{3,}"/>
                </li>
                <li>
                   Password:<br/>
                   <input id="password" type="password" name="password" required pattern=".{8,15}" maxlength="15">
                </li>
                <li>
                   <input type="submit" Value="Login">
                </li>
                <li></li>
             </ul>
          </form>
       </div>
    </div>
</body>
</html>

There are some more issues:

I'm not sure if you really want "characters only". If you do, try the pattern attribute.
Your validation script says at least 2 characters, but on the other hand you validate for 3 characters
id="login" appears twice

Javascript form validation with jQuery is not working sometimes

5 Answers5

Answer: Wait for DOM

Suggestion: HTML5 form validation