Hello.
I am rebuilding a registration page and the accompanying form.
I am at a point of implementing jQuery for password validation.
It will not validate nor does it give error messages.
I have researched this on other sites but nothing so far seems to work at all.
Please see code below and thank you in advance:
Note: I do realize I have a form within a form. I do not know if this is good, standard, proper or may be causing problems.
`
<!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 = 'jTest2.3.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 />
<form id="formCheckPassword">
<input type="password" class="form-control" name="password" id="password"/>
<input type="password" class="form-control" name="cfmPassword" id="cfmPassword" />
<input type="submit" value="submit"/>
</form>
<form>
<table>
<tr>
<td>Password</td>
<td>
<label for="pass"></label>
<input id="pass" name="pass" type="password" value="" />
</td>
</tr>
<tr>
<td>Password confirm</td>
<td>
<label for="pass2"></label>
<input id="pass2" name="pass2" type="password" value="" />
</td>
</tr>
</table>
<input type="submit" name="save" value="Save" />
</form>
</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>
$("#formCheckPassword").validate({
rules: {
password: {
required: true,
minlength: 6,
maxlength: 10,
} ,
cfmPassword: {
equalTo: "#password",
minlength: 6,
maxlength: 10
}
},
messages:{
password: {
required:"the password is required"
}
}
}); $("#formCheckPassword").validate({
rules: {
password: {
required: true,
minlength: 6,
maxlength: 10,
} ,
cfmPassword: {
equalTo: "#password",
minlength: 6,
maxlength: 10
}
},
messages:{
password: {
required:"the password is required"
}
}
});
<!--Password Validation-->
<script src = 'jquery.validate.min.js'></script>
<script>
$(function () {
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});
// validate signup form on keyup and submit
$("DemoForm").validate({
rules: {
pass: {
required: true,
minlength: 5
},
pass2: {
required: true,
minlength: 5,
equalTo: "#pass"
}
},
messages: {
pass: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
pass2: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
}
}
});
</script>
</body>
</html>
`
