My html code like this :
<form class="validatedForm" id="commentForm" method="get" action="">
<fieldset>
<input name="password" id="password" />
<input name="password_confirmation" />
</fieldset>
</form>
<button>Validate</button>
My JavaScript code to validate with jQuery validate like this :
jQuery('.validatedForm').validate({
rules: {
"password": {
minlength: 6
},
"password_confirmation": {
minlength: 6,
equalTo : "#password"
}
},
messages: {
"password": 'Please enter a password, minimal 6 characters',
"password_confirmation": 'Please confirm your password'
},
});
Demo and full code like this : http://jsfiddle.net/oscar11/fEZFB/609/
I want to add condition in jQuery validate
If password filled, required: true on password_confirmation
If password not filled, required: false on password_confirmation
Seems I need to add operator ternary on rules password_confirmation. But I'm still confused
How can I do it?
I try to make an answer for your problem, check this out
$(document).ready(function() {
$('.validatedForm').validate({
rules: {
"password": {
minlength: 6,
},
"password_confirmation": {
minlength: 6,
required: function(element) {
return $("input[name=password]").val() != "";
},
equalTo : "#password"
}
},
messages: {
"password": 'Please enter a password, minimal 6 characters',
"password_confirmation": 'Please confirm your password'
},
});
$('button').click(function () {
console.log($('.validatedForm').valid());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/additional-methods.js"></script>
<form class="validatedForm" id="commentForm" method="get" action="">
<fieldset>
<input name="password" id="password" />
<input name="password_confirmation" />
</fieldset>
</form>
<button>Validate</button>
Related
I'm using the plugin JQuery-Validate. I actually created a form which have the following inputs:
<div class="form-group bmd-form-group">
<label for="operator-password" class="bmd-label-floating"> <?= lang('password') ?> *</label>
<input type="password" class="form-control" id="operator-password" name="password" >
</div>
<div class="form-group bmd-form-group">
<label for="operator-confirm-password" class="bmd-label-floating"> <?= lang('confirm_pwd') ?> *</label>
<input type="password" class="form-control" id="operator-confirm-password" name="confirm_password">
</div>
essentially, I apply the class .ignore dynamically if a certain condition happend, eg:
$('#operator-password, #operator-confirm-password').addClass('ignore');
when I submit the form, I will get below the two inputs:
Field is required!
that's weird 'cause I configured the validate to skip the input with .ignore class:
$('#operator-form').validate({
rules: {
ignore: ".ignore",
password: {
required: true,
minlength: 8
},
confirm_password: {
equalTo: '#password'
}
},
You need to mention ignore outside of rules like following
$('#operator-form').validate({
ignore: ".ignore",
rules: {
password: {
required: true,
minlength: 8
},
confirm_password: {
equalTo: '#password'
}
}
})
https://jsfiddle.net/rL60wes2/
It is an easy code. Maybe using $().html() or .text().
Since Iam new to jquery so plz an easy to understand code.
Inspite of searching on previous similar posts I am still confused.
Do I need to create another js file or I have to make changes in the existing js file.
Guys if possible plz provide a jquery code.
(function($, W, D {
var JQUERY4U = {};
JQUERY4U.UTIL = {
setupFormValidation: function() {
$("#form").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
bio: "required",
password: {
required: true,
minlength: 5
},
passwordcp: {
equalTo: "#password"
}
},
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"
},
passwordcp: "Password not matching",
email: "Please enter a valid email address",
},
submitHandler: function(form) {
form.submit();
}
});
}
}
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
HTML
<form action="" id="form" >
<div class="formelement">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname"/>
</div>
<div class="formelement">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname"/>
</div>
<div class="formelement">
<label for="email">Email-ID</label>
<input type="text" name="email"/>
</div>
<div class="formelement">
<label for="bio">BIO</label>
<textarea rows="3" cols="30" name="bio"></textarea>
</div>
<div class="formelement">
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</div>
<div class="formelement">
<label for="passwordcp">Confirm-Password</label>
<input type="password" name="passwordcp" id="passwordcp" />
</div>
<div class="formelement">
<input type="submit" value="SUBMIT" class="submit"/>
</div>
</form>
<div class="display"></div>
I would just do it like this, see it in action here: http://jsfiddle.net/awsxtkd0/
$(document).ready(function() {
$("#form").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
bio: "required",
password: {
required: true,
minlength: 5
},
passwordcp: {
equalTo: "#password"
}
},
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"
},
passwordcp: "Password not matching",
email: "Please enter a valid email address",
}
});
$('#form').submit(function() {
if($('#form').valid()) {
var str = '';
str += $('#firstname').val() + '<br />';
str += $('#lastname').val() + '<br />';
str += $('#email').val() + '<br />';
str += $('#bio').val() + '<br />';
$('.display').append(str);
}
return false;
});
});
I'm using jQuery and jQuery Validate Plugin on a test page, my code is based on validate demo
<html>
<head>
<script src="http://jquery.bassistance.de/validate/lib/jquery-1.9.0.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.js"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submited!!!"); }
});
$().ready(function() {
$("#registerForm").validate({
rules : {
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlenght: 5
},
confirm_password: {
required: true,
minlenght: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
}
},
messages : {
username: {
required: "Please enter a username",
minlenght: "Your username must consist at least 2 characters"
},
password: {
required: "Please enter a password ",
minlenght: "Your password must consist at least 5 characters"
},
confirm_password: {
required: "Please repeat the password",
minlenght: "Your password must consist at least 5 characters",
equalTo: "This password doesn't match with the original password"
},
email: {
required: "Please enter a email",
email: "Invalid email"
}
}
});
});
</script>
<style type="text/css">
#commentForm { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#registerForm { width: 670px; }
#registerForm label.error {
margin-left: 10px;
width: auto;
display: inline;
color: red;
}
#newsletter_topics label.error {
display: none;
margin-left: 103px;
}
</style>
</head>
<body class="zoom: 1;">
<div id="main">
<form id="registerForm" method="post" action="" novalidate="novalidate">
<fieldset>
<legend>OLA MUNDO</legend>
<p><label for="username">Nome</label>
<input id="username" name="username" type="text" value=""></p>
<p><label for="email">E-mail</label>
<input id="email" name="email" type="email" value=""></p>
<p><label for="password">Password</label>
<input id="password" name="password" type="password" value=""></p>
<p><label for="confirm_password">Confirm Password</label>
<input id="confirm_password" name="confirm_password" type="password" value=""></p>
<p><input type="submit" class="submit" value="Enviar"></p>
</fieldset>
</form>
</div>
</fieldset>
</body>
The problem is that in my page the code doesn't work and i don't know why it happens.
I have a jquery.js file in my scripts directory but the script isn't loaded.
So i used the jquery from the demo site, i used the jquery hosted on google and that doesn't solves the problem. I don't know if the problem is on the script code, because i'm kind of newbie on javascript.
#Edit
I solved the problem but now the password and confirm password field doesn't validate, why? the js code is correct
you are writing your js before DOM is built up. Till then browser have not idea what register from is . So you have two option either put your javascript at bottom of page just above tag or use window.onLoad function. This will work ...
instead of $("registerForm") you should select by id $("#registerForm")
jquery selectors
you missed mention the selector id $("#registerForm")and messages every method mention , operator
JS:
$.validator.setDefaults({
submitHandler: function() { alert("submited!!!"); }
});
$().ready(function() {
$("#registerForm").validate({
rules : {
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlenght: 5
},
confirm_password: {
required: true,
minlenght: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
}
},
messages : {
username: {
required: "Please enter a username",
minlenght: "Your username must consist at least 2 characters"
}, //missed comma
password: {
required: "Please enter a password ",
minlenght: "Your password must consist at least 5 characters"
}, //missed comma
confirm_password: {
required: "Please repeat the password",
minlenght: "Your password must consist at least 5 characters",
equalTo: "This password doesn't match with the original password"
}, //missed comma
email: {
required: "Please enter a email",
email: "Invalid email"
}
}
});
});
I am trying to validate that my one password equals the other. The system keeps flagging the passwords not equal error.
Let me post my code:
<div class="fieldWrapper">
<label for="password" id="id_password">Password: </label>
<input id="id_password" type="password" placeholder="Password" name="password" maxlength="128" class="valid">
</div>
<div class="fieldWrapper">
<label for="password_verification">Confirm:</label>
<input id="id_password_verification" type="password" placeholder="Confirm" name="password_verification" maxlength="128">
</div>
$(document).ready(function()
{
$("#signup-form").validate({
rules: {
password: {
required: true,
minlength: 5
},
password_verification: {
required : true,
equalTo: "#id_password"
}
},
messages: {
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
password_verification: {
required: "Please enter your password again",
equalTo: "Please enter the same password as above"
},
},
submitHandler: function(form) {
form.submit();
}
});
});
Does anyone have any clue where I am going wrong here? Note that my form has the id signup-form.
You have dupplicate id in your HTML:
<label for="password" id="id_password">Password: </label>
remove id from the label.
I'm using the jQuery validation plugin for a simple form (name, email, and phone number). Everything is working well except for the phone, which keeps a class of error despite my typing a correct phone number...
Here are the relevant pieces of code :
Form :
<form action="" method="post">
<h2>Devis gratuit</h2>
<ul id="errorHolder"></ul>
<div class="field">
<input type="text" name="name" placeholder="Nom"/>
</div>
<div class="field phone-field">
<input type="text" name="phone" placeholder="Téléphone"/>
</div>
<div class="field email-field">
<input type="text" name="email" placeholder="Email"/>
</div>
<label><input type="checkbox" name="optin"/> Recevez des offres promotionnelles</label>
<button type="submit">Envoyer</button>
</form>
And the set of rules :
rules: {
name: "required",
phone: {
required: true,
minlength: 8,
maxLength: 10,
digits: true
},
email: {
required: true,
email: true
}
}
There is an error in your code, it should be:
rules: {
name: "required",
phone: {
required: true,
minlength: 8,
maxlength: 10, //not maxLength
digits: true
},
email: {
required: true,
email: true
}
look at the docs