jQuery Validation Form does seem to be working

Question

I am very new to jQuery and i tried to create a validation form from jQuery and it doesn't seem to be working. The jQuery form looks pretty normal to me and my form have bootstrap in it. I put it in JSFiddle and it gave me a error when i click submit. :P

http://jsfiddle.net/jimysb/3oLxfpz9/5/

<form action="" method="POST" class="form-horizontal" id="registerForm">
<div class="form-group">
    <label class="control-label col-sm-2" for="email">Username:</label>
<div class="col-sm-10">
    <input type="username" class="form-control" name="username" placeholder="Enter username" id="username" required />
</div>
</div>
<div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
    <input type="email" class="form-control" name="email" placeholder="Enter email" id="email" required />
</div>
</div>
<div class="form-group">
    <label class="control-label col-sm-2" for="email">Password:</label>
<div class="col-sm-10">
    <input type="password" class="form-control" name="password" placeholder="Enter password" id="password" required />  
</div>
</div>
<div class="form-group">
    <label class="control-label col-sm-2" for="email">Confirm Password:</label>
<div class="col-sm-10">
    <input type="password" class="form-control" name="confirmpassword" placeholder="Confirm Password" id="confirmpassword" required />
</div>
</div>                       
<div class="checkbox">
    <label><input type="checkbox" name="checkbox">Click it</label>
</div>
<div class="form-group"> 
<div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default" id="registersubmit">Submit</button>
</div>
</div>

And My jQuery Code

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {

$('#registerForm').validate({
    rules: {
        username: {
            required: true,
            minlength: 5,
            maxlength: 20
        },
        email: {
            required: true,
            minlength: 5,
            maxlength: 255,
            email: true
        },
        password: {
            required: true,
            minlength: 5,
            maxlength: 30
        },
        confirmpassword: {
            required: true,
            equalTo: '#password'
        }
    },
    messages: {
        username: {
            required: 'You must enter a username',
            minlength: 'Your username is too short',
            maxlength: 'Your username is too long'
        },
        email: {
            required: 'You must enter a email',
            minlength: 'Your email is too short',
            email: 'Please enter a valid email address'
        },
        password: {
            required: 'You must enter a password',
            minlength: 'Your password is too short',
            maxlength: 'Your password is too long'
        },
        confirmpassword: {
            required: 'You must confirm your password',
            equalTo: 'You password does not match'
        }
    }
});

});

Your script does not have the right to work. Missing **many** comma's. In your JSFiddle, try to click *JSHint* button on the topbar, it will highlight js errors for you. — Artur Filipiak, Jan 24 '15 at 23:17
You should include validate.js file. http://jsfiddle.net/philip100/emkv17hv/ — Artur Filipiak, Jan 24 '15 at 23:29
Oh, Maybe thats the problem that i didn't include validate.js — Jimmy Min, Jan 24 '15 at 23:32

score 0 · Accepted Answer · answered Jan 24 '15 at 23:32

0

The validate() method comes courtesy of this jQuery validation plugin, you can add it to your jsfiddle via the "External Resources" panel on the left.

answered Jan 24 '15 at 23:32

Matt McDaniel

16
1

jQuery Validation Form does seem to be working

1 Answers1