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>
Related
i have sent api request using jquery ajax i am getting ajax response like this
Array ( [consumer_key] => ada691a715307861907d65d36d [consumer_secret] => a75e40ec1530786190b62316d1 [consumer_nonce] => 1537011049789 [consumer_device_id] => ldx0EWMCl3hNhJWCRIdPVveLy [consumer_url] => processregistration ) {"success":"0","data":[],"message":"Email address is already exist"}
i would like to show error message if response contains "Email address is already exist" otherwise alert Message shuold be successfully submitted
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
var customers_firstname=$("#customers_firstname").val();
var customers_lastname=$("#customers_lastname").val();
var customers_telephone=$("#customers_telephone").val();
var email=$("#email").val();
var d = new Date();
var consumer_nonce = d.getTime();
U=url+'api/save_reg';
//alert(consumer_nonce);
//exit;
//var ul="{{ url('/backend/api/save_reg') }}";
$.ajax({
type:"POST",
url:url+'api/save_reg',
data:$("#postcontent").serialize(),
/* data:{
customers_firstname:customers_firstname,
customers_lastname:customers_lastname,
customers_telephone:customers_telephone,
email:email,
password:password
},*/
headers: {
"consumer-key": consumer_key,
"consumer-secret": consumer_secret,
"consumer-nonce": consumer_nonce,
"consumer-device-id": consumer_device_id,
},
beforeSend:function(){
$(".post_submitting").show().html("<center><img src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif'/></center>");
},success:function(response){
alert(response);
//-- alert(response[1]);
//alert(response);
//response = response.toJSON();
//alert(response);
$("#return_update_msg").html(response);
$(".post_submitting").fadeOut(1000);
}
});
}
});
#extends('frontend.layouts.app')
#section('title','Home')
#section('body')
<!-- Main Container -->
<div class="main-container container">
<ul class="breadcrumb">
<li><i class="fa fa-home"></i></li>
<li>Account</li>
<li>Register</li>
</ul>
<div class="row">
<div id="content" class="col-sm-12">
<h2 class="title">Register Account</h2>
<p>If you already have an account with us, please login at the login page.</p>
<div id="return_update_msg" class="return_update_msg">j</div>
<div class="post_submitting"></div>
<form name="postcontent" class="cmxform" id="postcontent" >
<fieldset id="account">
<legend>Your Personal Details</legend>
<div class="form-group required">
<label class="col-sm-2 control-label" for="customers_firstname">First Name</label>
<div class="col-sm-10">
<input type="text" name="customers_firstname" minlength="2" placeholder="First Name" id="customers_firstname" class="form-control">
<span id="customers_firstname_error"></span>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label" for="customers_lastname">Last Name</label>
<div class="col-sm-10">
<input type="text" name="customers_lastname" minlength="2" placeholder="Last Name" id="customers_lastname" class="form-control">
<span id="customers_lastname_error"></span>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label" for="email">E-Mail</label>
<div class="col-sm-10">
<input type="email" name="email" placeholder="E-Mail" id="email" class="form-control">
<span id="email_error"></span>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-telephone">Mobile Number</label>
<div class="col-sm-10">
<input type="tel" name="customers_telephone" placeholder="Telephone" id="customers_telephone" class="form-control">
<span id="customers_telephone_error"></span>
</div>
</div>
</fieldset>
<fieldset>
<legend>Your Password</legend>
<div class="form-group required">
<label class="col-sm-2 control-label" for="password">Password</label>
<div class="col-sm-10">
<input type="password" name="password" placeholder="Password" id="password" class="form-control">
<span id="password_error"></span>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label" for="confirm_password">Password Confirm</label>
<div class="col-sm-10">
<input type="password" name="confirm_password" placeholder="Password Confirm" id="confirm_password" class="form-control">
<span id="password_confirm_error"></span>
</div>
</div>
</fieldset>
<span id="success_message"></span>
<div class="buttons">
<input class="submit btn btn-primary" id="save_buttonk" type="submit" value="Submit">
<!--<input type="submit" id="save_button" value="Continue" class="btn btn-primary">-->
</div>
</form>
</div>
</div>
</div>
<br />
<!-- //Main Container -->
#endsection
#section('pagescript')
<script type="text/javascript" src="{{ asset('public/frontend/qshopee')}}/js/registration.js"></script>
<script>
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
// validate signup form on keyup and submit
$("#postcontent").validate({
rules: {
//customers_firstname: "required",
//customers_lastname: "required",
/*username: {
required: true,
minlength: 2
},*/
customers_firstname: {
required: true,
minlength: 2
},
customers_lastname: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
/*topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"*/
},
messages: {
//customers_firstname: "Please enter your firstname",
//customers_lastname: "Please enter your lastname",
/*username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},*/
customers_firstname: {
required: "Please enter a firstname",
minlength: "Your firstname must consist of at least 2 characters"
},
customers_lastname: {
required: "Please enter a lastname",
minlength: "Your lastname must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address"
/*agree: "Please accept our policy",
topic: "Please select at least 2 topics"*/
}
});
});
</script>
#stop
try
if (response.indexOf('Email address is already exist') > -1)
{
alert("Email Already Registered");
}
else
{
alert("Registration Successful");
1. Whenever an error pops up it usually repeats itself to another line as you can see from the example image.
2. And for some reason the custom messages are not appearing either, when I click on submit it says This field is required are the custom messages not working anymore?
Any help on how to solve this will be amazing, I've been trying to figure this out for 3 days, but can't find any help online. I'm a noob in JQuery Validation so please be detailed in your response. Thank you!
JQuery Code: I'm using Bootstrap 4 and jQuery 3.2.1, and jQuery Validate
$('.contactForm').validate ({
errorPlacement: function(error, element) {
error.appendTo('.error');
},
rules: {
fullname: {
required: true,
minlength: 5,
maxlength: 20
},
email: {
required: true,
minlength: 8,
maxlength: 40
},
subject: {
required: true,
minlength: 4,
maxlength: 33
},
comment: {
required: true,
minlength: 10,
},
messages: {
fullname: {
required: "Please enter your first and last name",
minlength: "Names can't be shorter than 5 characters",
maxlength: "Names can't be longer than 20 characters"
},
email: {
required: "Please enter your full email address",
minlength: "Emails can't be shorter than 8 characters",
maxlength: "Emails can't be longer than 40 characters"
},
subject: {
required: "Please enter a subject for your message",
minlength: "Subjects can't be shorter than 4 characters",
maxlength: "Subjects can't be longer than 33 characters"
},
comment: {
required: "Please type your message here",
minlength: "Message must be at least 10 characters long"
},
highlight: function(element, errorClass) {
$(element).removeClass(errorClass);
}
},
submitHandler: function() {
$('#noenter').show();
}
}
});
HTML:
<form class="contactForm" method="post" action="">
<div class="form-row mx-3">
<div class="forms col-md-12 mb-3">
<label class="bigsentence text-white font-weight-bold" for="fullname"><i class="text-danger pr-1 fas fa-id-card"></i>Name:<span class="ml-2 text-danger error"></span> </label>
<input type="text" class="form-control" name="fullname" id="fullname" placeholder="Your Full Name">
</div>
<div class="forms col-md-12 mb-3">
<label class="bigsentence text-white font-weight-bold" for="email"><i class="text-danger pr-1 fas fa-at"></i>Email:<span class="ml-2 text-danger error"></span></label>
<input type="email" name="email" class="form-control" id="email" placeholder="Your Email Address">
</div>
<div class="forms col-md-12 mb-3">
<label class="bigsentence text-white font-weight-bold" for="subject"><i class="text-danger pr-1 fas fa-info-circle"></i>Subject: <span class="ml-2 text-danger error"></span></label>
<input type="text" name="subject" class="form-control" id="subject" placeholder="Reason for contact">
</div>
<div class="col-md-12 mb-3">
<div class="forms form-group">
<label class="bigsentence font-weight-bold text-white" for="comment"><i class="text-danger pr-1 fas fa-pen-square"></i>Message: <span class="ml-2 text-danger error"></span></label>
<textarea type="text" name="comment" class="form-control" rows="4" id="comment" placeholder="Type your message here"></textarea>
</div>
</div>
<div class="col-md-12 mb-3">
<button style="max-width:280px;" name="send" type="submit" class="rsvpbtn btn btn-block btn-danger sendmessage">SEND MESSAGE</button>
</div>
</div>
</form>
Your errorPlacement function uses just a class, one found in all error elements. Therefore each error gets appended to all four error elements.
Use this instead:
error.appendTo(element.parent().find("span"));
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
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>
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