We Keep Coding

Jquery.Validate Password Equalto - doesn't display error

I am able to set Required = true, min and max lengths but for some reason when i try to set an EqualTo paramater for the PasswordAgain field, the form simply allows Submit even though the passwords do not match.
<section>
<label class="input login-input">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input name="ctl00$ContentPlaceHolder1$ctl01$txtUserName" type="text" id="txtUserName" class="form-control" placeholder="UserName" />
</div>
</label>
</section>
<section>
<label class="input login-input no-border-top">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input name="ctl00$ContentPlaceHolder1$ctl01$txtEmail" type="text" id="txtEmail" class="form-control" placeholder="Email Address" />
</div>
</label>
</section>
<section>
<label class="input login-input no-border-top">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input name="ctl00$ContentPlaceHolder1$ctl01$txtPassword" type="password" id="txtPassword" class="form-control" placeholder="Password" />
</div>
</label>
</section>
<section>
<label class="input login-input no-border-top">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input name="ctl00$ContentPlaceHolder1$ctl01$txtPasswordAgain" type="password" id="txtPasswordAgain" class="form-control" placeholder="Password Confirm" />
</div>
</label>
</section>
<script src="<%= ResolveUrl("~/Content/assets/plugins/sky-forms-pro/skyforms/js/jquery.form.min.js")%>"></script>
<script src="<%= ResolveUrl("~/Content/assets/plugins/sky-forms-pro/skyforms/js/jquery.validate.min.js")%>"></script>
<script>
jQuery(document).ready(function() {
$("#form1").validate({
// Rules for form validation
rules:
{
ctl00$ContentPlaceHolder1$ctl01$txtUserName:
{
required: true
},
ctl00$ContentPlaceHolder1$ctl01$txtEmail:
{
required: true,
email: true
},
ctl00$ContentPlaceHolder1$ctl01$txtPassword:
{
required: true,
minlength: 6,
maxlength: 20
},
ctl00$ContentPlaceHolder1$ctl01$txtPasswordAgain:
{
required:true,
minlength:6,
equalTo:"#ctl00$ContentPlaceHolder1$ctl01$txtPassword"
}
},
// Messages for form validation
messages:
{
ctl00$ContentPlaceHolder1$ctl01$txtUserName:
{
required: '* Requires a valid UserName.'
},
ctl00$ContentPlaceHolder1$ctl01$txtEmail:
{
required: '* This is a Required Field.',
minlength: '* Password Min Length of 6 char.'
},
ctl00$ContentPlaceHolder1$ctl01$txtPassword:
{
required: '* This is a Required Field.',
minlength: '* Password Min Length of 6 char.'
},
ctl00$ContentPlaceHolder1$ctl01$txtPasswordAgain:
{
required: '* This is a Required Field.',
minlength: '* Password Min Length of 6 char.',
equalTo: "Please specify the same password as above."
}
},
// Do not change code below
errorPlacement: function (error, element) {
error.insertAfter(element.parent());
}
});
});
</script>

ctl00$ContentPlaceHolder1$ctl01$txtPasswordAgain:
{ required:true,
equalTo:"#ctl00$ContentPlaceHolder1$ctl01$txtPassword"
}
Remove minlength from ctl00$ContentPlaceHolder1$ctl01$txtPasswordAgain
i hope maybe it works

Validating password Match in Javascript

I am trying to validate both passwords field and checking that both of them match but the form still gives an error even if both input boxes have the same password.
JS
var validator = $("#signupform").validate({
rules: {
password: {
required: true,
minlength: 6
},
repeatpassword: {
required: true,
minlength: 6,
equalTo: "#password"
}
},
messages: {
password: {
required: "Provide a password",
minlength: jQuery.format("Enter at least {0} characters")
},
repeatpassword: {
required: "Repeat your password",
minlength: jQuery.format("Enter at least {0} characters"),
equalTo: "Your passwords do not match"
}
},
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="5">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="repeatpassword" id="repeatpassword" class="form-control input-lg" placeholder="Confirm Password" tabindex="6">
</div>
</div>

Not sure if you knew this but, "It is absolutely required that you have <form></form> tags for the jQuery Validate plugin to function properly, or at all." Read More
So I added a form tag.
What I think the issue with the passwords was, your were doing this:
jQuery.format("Enter at least {0} characters")
There is an error in console:
"$.format has been deprecated. Please use $.validator.format instead.";
So I changed your code to:
jQuery.validator.format("Enter at least {0} characters")
var validator = $("#signupform").validate({
rules: {
password: {
required: true,
minlength: 6
},
repeatpassword: {
required: true,
minlength: 6,
equalTo: "#password"
}
},
messages: {
password: {
required: "Provide a password",
minlength: jQuery.validator.format("Enter at least {0} characters")
},
repeatpassword: {
required: "Repeat your password",
minlength: jQuery.validator.format("Enter at least {0} characters"),
equalTo: "Your passwords do not match"
}
},
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<form id="signupform">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="5">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="repeatpassword" id="repeatpassword" class="form-control input-lg" placeholder="Confirm Password" tabindex="6">
</div>
</div>
<input type="submit" value="Submit">
</form>

JQuery Validation matching fields

I am developing a project with a registration form. I have 2 email fields as well as 2 password fields, each need to match each other. I am using JQuery validate and Bootstrap in an ASP.NET MVC 4 (C#) framework. Even if they are matching, the fields are getting the error that they do not match.
HTML
Registration Form
<div class="row">
<form id="formRegister" class="form-horizontal col-xs-5">
<div class="form-group">
<label for="textFirstName" class="control-label col-xs-2">First name</label>
<div class="col-xs-4">
<input type="text" name="textFirstName" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<label for="textLastName" class="control-label col-xs-2">Last name</label>
<div class="col-xs-4">
<input type="text" name="textLastName" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<label for="textEmail" class="control-label col-xs-2">Email</label>
<div class="col-xs-4">
<input type="text" name="textEmail" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<label for="textEmail2" class="control-label col-xs-2">Reenter email</label>
<div class="col-xs-4">
<input type="text" name="textEmail2" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<label for="passwordPW1" class="control-label col-xs-2">Password</label>
<div class="col-xs-4">
<input type="password" name="passwordPW1" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<label for="passwordPW2" class="control-label col-xs-2">Reenter Password</label>
<div class="col-xs-4">
<input type="password" name="passwordPW2" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<div class="btn-group col-xs-offset-2 col-xs-5">
<button type="submit" class="btn btn-info">Submit</button>
<button type="reset" class="btn btn-info">Clear</button>
</div>
</div>
</form>
</div>
JS
jQuery(function ($) {
$('#formRegister').validate({
errorElement: "div",
errorPlacement: function(error, element) {
error.appendTo(element.parent("div").next("div"));
},
rules: {
textFirstName: {
required: true,
minlength: 1,
maxlength: 50
},
textLastName: {
required: false,
maxlength: 50
},
textEmail: {
required: true,
email: true
},
textEmail2: {
equalTo: "#textEmail"
},
passwordPW1: {
required: true,
minlength: 4
},
passwordPW2: {
equalTo: "#passwordPW1"
}
},
messages: {
textFirstName: "The first name must be from 1 to 50 characters in length",
textLastName: "The last name must be from 0 to 50 characters in length",
textEmail: "Please enter a valid email address",
textEmail2: "Emails do not match",
passwordPW1: "The password must be from 4 to 50 characters in length",
passwordPW2: "Passwords do not match"
},
highlight: function (element) {
$(element).closest('next').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.next').removeClass('error').addClass('success');
},
submitHandler: function (form) {
form.submit();
}
});
});

Your problem is that you're referring to selectors that don't match anything. For instance, #textEmail (used in the equalTo property) won't match anything in your current DOM.
Replace this line:
<input type="text" name="textEmail" class="form-control" />
With this line:
<input type="text" id="textEmail" name="textEmail" class="form-control" />
Alternatively, you can use a different selector in your equalTo property:
// ...
rules: {
// ...
textEmail2: {
equalTo: "[name=textEmail]"
},
// ...

Your validation for equalTo currently is
textEmail2: {
equalTo: "#textEmail"
}
but the input textEmail has no id="textEmail". Try to add this id and it should work then.
The same applies to other validation rules where you match against ids that are not yet added at the inputs.

I don't know anything about .asp.net and bootstrap, but
in your form, you are using the name tag, while in your javascript,
you are using a #, which refers to an ID.
Give your input an the id textEmail and passwordPW1

Groovy <g:form> validate using jquery validate()

below is example of form validation using jquery what I copied from internet,
however, when I used <g:form> instead of <form> validate function not work.
Please suggest better way to validate form using groovy form
Thanks
<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="runnable.css" rel="stylesheet" />
<!-- Load jQuery and the validate plugin -->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<!-- jQuery Form Validation code -->
<script>
// When the browser is ready...
$(function() {
// Setup form validation on the #register-form element
$("#register-form").validate({
// Specify the validation rules
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
agree: "required"
},
// Specify the validation error messages
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<h1>Register here</h1>
<!-- The form that will be parsed by jQuery before submit -->
<form action="" method="post" id="register-form" novalidate="novalidate">
<div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br />
<div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br />
<div class="label">Email</div><input type="text" id="email" name="email" /><br />
<div class="label">Password</div><input type="password" id="password" name="password" /><br />
<div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
</form>
</body>
</html

Your <form> tag contains novalidate Attribute which Indicates that the form is not to be validated on submit, get rid of that first. Following is sample code from test project to use jquery validation with <g:form>. Sorry for long code.
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="esn-registration">
<script type="text/javascript">
$(document).ready(function() {
$.validator.addMethod("emailId", function(value, element) {
return this.optional(element) || /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value);
}, "Email is invalid: Enter a valid email");
$.validator.addMethod("username", function(value, element) {
return this.optional(element) || /^[a-z][\w.-]{3,20}$/i.test(value);
}, "Characters, numbers, ( _ ), ( - ) and ( . ) only");
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
firstName: "required",
lastName: "required",
emailId: {
required: true,
email: true,
emailId: true
},
username: {
required: true,
minlength: 3,
maxlength: 20,
username: true
},
password: {
required: true,
minlength: 6
}
},
messages: {
firstName: { required: "Please enter your first name" },
lastName: { required: "Please enter your last name" },
emailId: {
required: "Please enter an email address",
email: "Please enter a valid email address"
},
username: {
required: "Please enter an username",
minlength: "Username must exceed 3 characters",
maxlength: "Username cannot exceed 20 characters"
},
password: {
required: "Please provide a password",
minlength: "Password must exceed 6 characters"
}
},
submitHandler: function(form) {
if(signupForm.valid()){
form.submit();
$('button[type="submit"]').removeAttr('disabled');
} else {
$('button[type="submit"]').attr('disabled','disabled');
}
}
});
// validate login form on keyup and submit
$("#loginForm").validate({
rules: {
username: "required",
password: {
required: true,
minlength: 6
}
},
messages: {
username: {
required: "Please enter an username or email",
},
password: {
required: "Please provide a password",
minlength: "Password must exceed 6 characters"
}
},
submitHandler: function(form) {
if(loginForm.valid()){
form.submit();
$('button[type="submit"]').removeAttr('disabled');
} else {
$('button[type="submit"]').attr('disabled','disabled');
}
}
});
// propose username by combining first and lastname
$("#username").focus(function() {
var firstName = $("#firstName").val();
var lastName = $("#lastName").val();
if(firstName && lastName && !this.value) {
this.value = $.trim(firstName) + "." + $.trim(lastName);
}
});
});
</script>
<title>ESN</title>
</head>
<body>
<div class="front-card">
<div class="front-welcome">
<div class="front-welcome-text">
<h3>Welcome</h3>
</div>
</div>
<div class="front-login">
<g:form name="loginForm" controller="login" action="validate"
method="POST" class="form well well-small container-fluid span3.5">
<div id="login-form">
<div class="placeholding-login-username">
<input id="user-name" name="username"
value="${loginInstance?.username }"
placeholder="Username or email" class="input-xlarge" type="text"
maxlength="100" required/>
</div>
<div class="placeholding-login-password">
<input id="password" name="password"
value="${loginInstance?.password }"
placeholder="Password(min. length 6)" class="input-xlarge"
type="password" maxlength="30" required/>
</div>
<g:if test="${message}">
<div class="message text-error" role="status">
<ul class="errors" role="alert">
<li>
${message}
</li>
</ul>
</div>
</g:if>
<div class="button pull-right">
<button name="submit" class="btn" type="submit">Login</button>
</div>
</div>
</g:form>
</div>
<div class="front-signup">
<g:form name="signupForm" action="save" method="POST"
class="form well well-small container-fluid span3.5">
<div id="signup-form">
<fieldset class="form">
<legend>
<h5>
<strong class="muted">New to ESN?</strong> <strong
class="text-info"> Sign up</strong>
</h5>
</legend>
<div class="placeholding-first-name">
<input id="firstName" name="firstName"
value="${userInstance?.firstName}" placeholder="First name"
class="input-xlarge" type="text" maxlength="150" required/>
</div>
<div class="placeholding-last-name">
<input id="lastName" name="lastName"
value="${userInstance?.lastName}" placeholder="Last name"
class="input-xlarge" type="text" maxlength="150" required/>
</div>
<div class="placeholding-email-id">
<input id="emailId" name="emailId"
value="${userInstance?.emailId}" placeholder="Email Id(Corporate)"
class="input-xlarge" type="email" maxlength="100" required/>
</div>
<div class="placeholding-signup-username">
<input id="username" name="username"
value="${userInstance?.username}" placeholder="Username"
class="input-xlarge" type="text" maxlength="20" required/>
</div>
<div class="placeholding-signup-password">
<input id="password" name="password"
value="${userInstance?.password}"
placeholder="Password(min. length 6)" class="input-xlarge"
type="password" maxlength="30" required/>
</div>
</fieldset>
<fieldset class="button pull-right">
<button id="submit" name="submit" class="btn btn-primary" type="submit">Sign
up</button>
</fieldset>
<div>
<g:if test="${blankMessage}">
<div class="message text-error" role="status">
<ul class="errors" role="alert">
<li>
${blankMessage}
</li>
</ul>
</div>
</g:if>
<g:hasErrors bean="${userInstance}">
<div class="text-error">
<ul class="errors" role="alert">
<g:eachError bean="${userInstance}" var="error">
<li
<g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message
error="${error}" /></li>
</g:eachError>
</ul>
</div>
</g:hasErrors>
</div>
</div>
</g:form>
</div>
</div>
</body>
</html>

Password Strength JQuery

I need some help. I'm totally new to JS and Jquery and faced up with the following problem: I have 3 password field: current pass, new pass and confirm pass. The Password meter checks all 3 fields, but I need only the new pass field.
Here is the code
$.validator.passwordRating.messages = {
"similar-to-username": "similara cu emailul",
"too-short": "prea scurta",
"very-weak": "prea slaba",
"weak": "slaba",
"good": "buna",
"strong": "excelenta"
};
$.validator.messages = {
"email": "Scrie o adresa de email valida.",
"password": "",
"password_confirm": "",
"required": "Acest camp este obligatoriu.",
};
var validator = $("#pass_form").validate({
rules: {
password: {
password: "#password1"
},
password_confirm: {
required: true,
equalTo: "#password2"
}
},
messages: {
password_confirm: {
required: "Repeta parola",
minlength: jQuery.format("Parola trebuie sa fie de cel putin {0} caractere"),
equalTo: "Scrie aceeasi parola"
}
}
});
$("#password").valid();
<form action="" method="post" id="pass_form">
<div class="element left">
<label for="password"><Bla/></label>
<input type="password" name="password" id="password" placeholder="Password">
<label class="error"></label>
</div>
<div class="element left double">
<div class="left spacer">
<label for="password1"></label>
<input type="password" id="password1" name="password1" placeholder="New Pass">
<label class="error"></label>
</div>
<div class="left spacer" id='password_div'>
<label for="password2"><fmt:message key="profile.profile_data.parola_noua2"/></label>
<input type="password" id="password2" name="password2" oninput="compare()"/>
<label class="error" id='compare_error'></label>
<label class="error">/></label>
<input type="hidden" name="password1hid" id="password1hid" value=""/>
</div>
<div class="left strength">
<div class="password-meter">
<div class="password-meter-message"> </div>
<div class="password-meter-bg">
<div class="password-meter-bar"></div>
</div>
</div>
</div>
</div>
<div class="element left">
<button onclick="document.getElementById('pass_form').submit()" name="password"></button>
<input type="hidden" name="field" id="field" value="pass" />
</div>
</form>

var validator = $("#pass_form").validate({
rules: {
//Enter the id of new password.. i have used password1
password1: {
//Conditions
},
//Enter the id of confirm new password.. i have used password2
password2: {
//Conditions
}
},
messages: {
password2: {
required: "Repeta parola",
minlength: jQuery.format("Parola trebuie sa fie de cel putin {0} caractere"),
equalTo: "Scrie aceeasi parola"
}
}
});
Hope this helps