THIS is what I had originally been working with but does not work for password validation or messages:
`
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>jQuery Form Validation</title>
</head>
<body>
<form method = 'post' action = 'jTest1.8.html' id = 'DemoForm' name = 'DemoForm'>
Username<br />
<input type="text" id="user_input" name="username" /><br />
Email<br />
<input type="text" id="email" name="email" /><br />
Password<br />
<input type="password" id="pass_input" name="password" /><br />
Confirm Password<br />
<input type="password" id="v_pass_input" name="v_password" /><br />
<input type="submit" id="register" value="Register" disabled="disabled" />
</form>
<div id="test">
</div>
<!--Script to disable Submit button -->
<script>
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
</script>
<!--Rules & Messages-->
<!--Username-->
<!--Email-->
<script src = 'jquery.validate.min.js'></script>
<script>
$('#DemoForm').validate ({
rules: {
'email': {
required:'true',
email: 'true',
}
},
messages:{
'email':{
required:'Please submit your email.',
email:'Enter a valid email.',
}
},
});
</script>
</body>
</html>
<!--Password Validation-->
<script src = 'jquery.validate.min.js'></script>
<script>
$('#DemoForm').validate({
rules: {
'pass_input': {
required: true,
minlength: 8,
maxlength: 12,
} ,
'v_pass_input': {
equalTo: "#password",
minlength: 8,
maxlength: 12
}
},
messages:{
password: {
required:"the password is required"
}
}
});
</script>
`
