0

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>
Improve this question
2
  • use firebug to see the error in it console. Commented Mar 5, 2014 at 6:59
  • You can add the script in after form. not sure about $().ready function Commented Mar 5, 2014 at 7:00

5 Answers 5

Reset to default
6

Add document in your code like this.

$(document).ready(function(){
    //Your Code Logic;
});
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I tried adding it and refreshed the browser but it still not appearing This was still working yesterday though..i wonder whats the problem
1

Try add "document" to function

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

change to

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

Comments

0

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 )
Improve this answer

Comments

0

Try this type:

$(function(){
///////your code.........
});
Improve this answer

Comments

0

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:

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
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.