Validate HTML form with JQuery

Question

Can someone see where I'm going wrong with this form validation? I was using an example I found online and it does not work for me.

I want to validated the input fields with the jquery before passing it on to the server side script. It supposed to print error message next to the field where the user is missing an input.

Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Register</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5">
<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="forms.css" />

 <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
      $("#registerform").validate({
        rules: {
          username: "required",
          firstname: "required", 
          email: {// compound rule
          required: true,
          passwd: true,
          email: true,
        },
        username:{
            username: true
        },  
        url: {
          url: true
        },
        comment: {
          required: true
        }
        },
        messages: {
          comment: "Please enter a comment."
        }
      });
    });
  </script>

<style type="text/css">

label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
 </head>

<body>

Please register below
<p />
                <form action=" " id="registerform" method="POST">


        <table cellspacing="9">
         <tr><td><b>Username:</b></td><td><input type="text" name="username" size="30"></td></tr>
         <tr><td><b>First name:</b></td><td><input type="text" name="firstname" size="30"/></td></tr>
         <tr><td><b>Surname:</b>   </td><td><input type="text" name="lastname" size="30"/></td></tr>
         <tr><td><b>Email  : </b>  </td><td><input type="text" name="email" size="30"/></td></td></tr>
         <tr><td><b>Password :</b> </td><td><input type="password" name="passwd" size="30"/></td></tr>

         <tr><td><b>Telephpone:</b></td><td><input type="text" name="telephone" size="30"/></td></td></tr>
         <tr><td><b>House No:</b></td><td><input type="text" name="ad1" size="30"/></td></td></tr>
         <tr><td><b>Street Name:</b></td><td><input type="text" name="street" size="30"/></td></tr>
         <tr><td><b>Town/ City:</b></td><td><input type="text" name="town" size="30"/></td></tr>
         <tr><td><b>Post code:</b></td><td><input type="text" name="pcode" size="30"/></td></tr>

     </table>

     <p />
                 <input class="submit" type="submit" value="Sign Up!" />
                <input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
                </form>


</body>

Here's the code the original code that I got from a website somewhere and it works. But I can't seem to use the example in my code.

<html>
  <head>
  <title>Simple Form Validation</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $("#form2").validate({
        rules: {
          name: "required",// simple rule, converted to {required:true}
          email: {// compound rule
          required: true,
          email: true
        },
        url: {
          url: true
        },
        comment: {
          required: true
        }
        },
        messages: {
          comment: "Please enter a comment."
        }
      });
    });
  </script>

  </head>


  <body>
    <form id="form2" method="post" action=""><br />
      Name * <input type="text" name="name" /> <br />
      E-Mail *<input type="text" name="email" /> <br />

      URL <input type="text" name="url" /> <br />
      Your comment * <textarea name="comment" ></textarea> <br />
      <input class="submit" type="submit" value="Submit"> 
    </form>
  </body>
</html>

Update: Thanks to @Usman it's now working. One more question though, is it possible to change the default error message instead of the 'This field is required' ?

Thanks

It would be a lot easier for others to help you if you explain how it's not working for you. — Shawn Chin
– Shawn Chin, Commented Aug 22, 2011 at 11:41
Repeating what @Shawn Chin said but be sure to check if any Javascript errors pop-up (standard function in FF and Chrome). — Damien
– Damien, Commented Aug 22, 2011 at 12:02

Muhammad Usman · Accepted Answer · 2011-08-22 22:33:33Z

Remove non-existing fields from validation rule, url etc. I have removed these and its working. Working http://jsfiddle.net/xyRRU/ , check the code below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Register</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5">
<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="forms.css" />

 <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
      $("#registerform").validate({
        messages: {

            firstname: "Please enter your firstname",
            username: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 2 characters"
            },

            email: "Please enter a valid email address"

        },
        rules: {
          username: "required",
          firstname: "required", 
          email: {// compound rule
          required: true,
          passwd: true,
          email: true,
        },
        },

      });
    });
  </script>

<style type="text/css">

label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
 </head>

<body>

Please register below
<p />
                <form action=" " id="registerform" method="POST">


        <table cellspacing="9">
         <tr><td><b>Username:</b></td><td><input type="text" name="username"  size="30"></td></tr>
         <tr><td><b>First name:</b></td><td><input type="text" name="firstname"  size="30"/></td></tr>
         <tr><td><b>Surname:</b>   </td><td><input type="text" name="lastname" size="30"/></td></tr>
         <tr><td><b>Email  : </b>  </td><td><input type="text" name="email" size="30"/></td></td></tr>
         <tr><td><b>Password :</b> </td><td><input type="password" name="passwd" size="30"/></td></tr>

         <tr><td><b>Telephpone:</b></td><td><input type="text" name="telephone" size="30"/></td></td></tr>
         <tr><td><b>House No:</b></td><td><input type="text" name="ad1" size="30"/></td></td></tr>
         <tr><td><b>Street Name:</b></td><td><input type="text" name="street" size="30"/></td></tr>
         <tr><td><b>Town/ City:</b></td><td><input type="text" name="town" size="30"/></td></tr>
         <tr><td><b>Post code:</b></td><td><input type="text" name="pcode" size="30"/></td></tr>

     </table>

     <p />
                 <input class="submit" type="submit" value="Sign Up!" />
                <input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
                </form>


</body>

Is there any way to specify ones own error message instead of the default " This field is required"?
I have edited the answer showing how to add your own messages, thanks.

lowe_22 · Accepted Answer · 2011-08-22 11:44:43Z

1

Check your syntax - you have a comma left in here:

    rules: { 

      username: "required", 

      firstname: "required",  

      email: {// compound rule 

      required: true, 

      passwd: true, 

      email: true**,** 

    },

Remove that and see how you get on.

answered Aug 22, 2011 at 11:44

lowe_22

3951 gold badge6 silver badges14 bronze badges

Comments

nickytonline · Accepted Answer · 2011-08-22 11:51:42Z

0

You're getting JavaScript errors. Run this fiddle to see, http://jsfiddle.net/nickyt/Sjvh2 . It looks like the validation plug-in is throwing errors on line 493. Start debugging ;)

edited Aug 22, 2011 at 11:51

answered Aug 22, 2011 at 11:44

nickytonline

6,9797 gold badges47 silver badges76 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:46:01Z

0

Your link to jquery.validate.js is returning a 403 Forbidden error, which means you're not actually importing the plugin.

Try this link instead: http://view.jquery.com/trunk/plugins/validate/jquery.validate.js

<script type="text/javascript" src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.js"></script>

Better still, point to a local copy of the file.

Also, do check that you're not getting any JS errors using firebug.

Edit : This change alone will not solve your problem, but you really shouldn't be hotlinking the script from dev.jquery.com. See related answer, and Hotlinking to be disabled on January 31, 2011.

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Aug 22, 2011 at 11:47

Shawn Chin

87.4k20 gold badges168 silver badges193 bronze badges

2 Comments

Julie Over a year ago

Hmm, that doesn't seem to help :( Thanks though.

Shawn Chin Over a year ago

This by itself will not solve your problem since you had errors in your JS. However, you really should change your link since dev.jquery.com does not allow hotlinking. You're better off hosting your own.

Collectives™ on Stack Overflow

Validate HTML form with JQuery

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related