Question

I am learning jQuery right now and am looking to validate form fields with it.

The registration form in question is at http://taehee.pumpl.com/register.php

The basic code for the form field I made is:

<div id="register">
        <form action="">
        <fieldset>
        <legend>Register</legend>
        <ol>
            <li><label for="username">유저네임</label>
            <input id="username" name="username" size="32" type="text" ></li>
            <li><label for="email">이메일</label>
            <input id="email" name="email" size="32" type="text"></li>
            <li><label for="password">비밀번호</label>
            <input id="password" name="password" size="32" type="password"></li>
            <li><label for="password2">비밀번호 확인</label>
            <input id="password2" name="password2" size="32" type="password"></li></li>
        </ol>
        </fieldset>
        <input type="submit" value="Submit">
        </form>
    </div> <!-- register -->

I’ve loaded jQuery in the header using the following:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

I also created a script with the following code:

$('#register').validate({
rules: {
    username: {
        required: true,
    },
    email: {
        required: true,
        email: true
    },
    password: {
        minlength: 4,
        required: true
    },
    password2: {
        equalTo: "#password"
    }
},
success: function(label) {
    label.text('OK!').addClass('valid');
}

});

Unfortunately, it doesn’t seem to work. I fill out the form and it doesn’t matter whether the fields are all wrong.

Can anyone help me? Thank you!

Answer 1

There are two small/easy-to-fix issues here. First as the comments state you need to include the validation plugin, for example:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

This pulls it from the Microsoft CDN, or grab and host from your site. The second issue is that .validate() works on <form> elements, so you need this instead:

 $("#register form")

Or, give the ID to the <form> directly and use that selector.

Here’s an updated version with both fixes in place, also jQuery has released 1.4.1 and 1.4.2, you may want to consider upgrading to get those bug fixes, just change the 1.4.0 in your src URL to 1.4.2.