We Keep Coding

JQuery validate not implementing 'required' in email field

I've a simple HTML input:
<input id="email" name="email" value="" type="email">
and validate it using JQuery validate:
$('form').validate({
rules: {
email: {
required: 'true',
email: 'true'
}
}
});
The rules are applied, I can see them in $('#email').rules(). However when I later run $('#email').valid() or $('form').valid() the input is marked as valid when empty, but invalid when an invalid email address is entered.
How do I ensure the input is invalid when empty?
Relevant JSfiddle: https://jsfiddle.net/ycypuy86/

I usually set these without quotes?
rules: {
email: {
required: true,
email: true
}
}
remove quotes on your fiddle and it works.

How to trigger jquery validation on form submit rather than on blur

I am using Jquery validation plugin to validate, I am trying to validate all fields on click of submit button.
But if you see in fiddle by typing wrong email format and if you move to password that next input field it gives message saying "Please enter a valid email address", which I dont want.
I want all fields to validate on click of submit button till then submit button should be disabled when all fields are valid then allow user to click and validate once again to check fields.
is it possible to invoke validaion plugin on submit?
Here is what I tried so far
Html code
<form action="" method="post" id="register-form" >
<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>
my js code
$(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();
}
});
});

Try this..
$(function() {
onfocusout: false,
onkeyup: false,
onclick: false
// 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();
},
errorPlacement: function(error,element) {
return true;
},
invalidHandler: function(event, validator) {
alert(validator.valid());
//if(validator.valid()) show your modal then use validator.errors() to show custom errors
}
});
});

This simple validation might work for you. Please have a look.
$('tab').addClass('inactive);
$('input[type="submit"]').click(function(){
//Onclick get all the input value
var firstname = $("#firstname").val(),
lastname = $("#firstname").val(),
email = $("#email").val(),
psw = $("#password").val(),
regx = /^[a-z]+[a-z0-9._]+#[a-z]+\.[a-z.]{2,5}$/;
//If anything is invallid
if(firstname == "" || lastname == "" || email == "" || !regx.text(email) || psw == ""){
if(firstname == ""){ //if firstname is blank
alert("Please enter your first name");
}
if(lastname == ""){ //if lastname is blank
alert("Please enter your last name");
}
if(email == ""){ //if email is blank
alert("Please enter email id");
}
if(!regx.text(email)){ //if email is not in proper format
alert("Please enter valid email id");
}
if(psw == ""){ //if password is blank
alert("Please enter password");
}
return false; //form will not submit, it will return false
}else{
$('.tab').addClass('active').removeClass('inactive'); //if for is valid, add/remove class to the element
}
});

jQuery validation of two fields len().

Guys I am using jQuery Validation plugin to validate the Input Text fields...
like this:
$("#formSettings").validate({
rules: {
sta: {
required: true,
},
crs: {
equalTo: "#password"
}
},
messages: {
email: {
required: "Please Provide Your Email Address",
email: "Provide Valid Email Address"
},
});
The issue: I need to match one textfield value with the other, each textfield have comma separated values and they should match before continuing, any idea how can I do that
like if textfield 1 is: 1,2,3,4,5,6 then textfield2 should match.

$('#selector').val().length
Above the basic jQuery version of .length After that you could do an if statement. Here is a brief untested test you try:
<input type="text" value="1,2,3,4,5" id="thing1">
<input type="text" value="1,2,3,4" id="thing2">
<input type="button" name="submit" value="submit" id="submit">
$('#submit').click(function(event){
var thing1 = $('#thing1').val().length;
var thing2 = $('#thing2').val().length;
if (thing1 == thing2) {
return true;
} else {
alert("Contents must have same length");
return false;
}
});
And the fiddle: http://jsfiddle.net/8XQB3/

A Very Basic Confirm password validation not working

Can anyone solve this fiddle. it has two fields password and confirm password. Validation needs to be done such that both password entered should be the same.
$(document).ready(function ()
{
$('#EditForm').validate({
rules: {
password: {
required: true
},
cpassword: {
required: true,
equalTo: "#password"
}
}
});
});
http://jsfiddle.net/kalai789/aCZgK/2/
Thanks in advance

Firstly the external version of jQuery you had loaded was very old (1.5.2) it appears incompatible with the current version of validate, I updated the fiddle to use 1.6.4 as that was the lowest available on jsFiddle. Secondly, the rules and other settings for the validate plugin are keyed on the name attribute of the element, not the id, so they need to be added:
<input type="password" name="password" id="password"/>
<input type="password" name="cpassword" value="" id="cpassword"/>
Working fiddle

use keyup method
http://jsfiddle.net/dbwMY/
check the info source
https://stackoverflow.com/a/9717796/1768043

Found similar question
Demo
jQuery('.validatedForm').validate({
rules : {
password : {
minlength : 5
},
password_confirm : {
minlength : 5,
equalTo : "#password"
}
}
});

Conditional validation with jquery

Ok this is driving me crazy. I have a user account page. Where you have the option to change your password. I want a conditional jquery validation that if the user types in a new password in the new password box the box that confirms the password as well as the box that asks for the old password is turned into a required element. here is my ragtag code so far:
$("#aspnetForm").validate({
rules: {
<%=CurrentPass.UniqueID %>: {
required: <%=NewPass1.UniqueID %>:specified}
<%=NewPass2.UniqueID %>: {
required: <%=NewPass1.UniqueID %>:specified}
}, messages:{}
});
Just to clear something up. I am using :specified because if the filed is filled. Maybe some other condition?

I think you want to use equalTo for the confirmation password, with the current password required if the new password has data in it.
$('form').validate({
rules: {
<%= CurrentPass.UniqueID %>: {
required: '#<%= NewPass1.ClientID %>:filled'
},
<%= NewPass2.UniqueID %>: {
equalTo: '#<%= NewPass1.ClientID %>'
}
}
});

Those selectors need to be strings using :filled (unless :specified is a custom selector you made) and found by ID instead of name, like this:
$("#aspnetForm").validate({
rules: {
<%=CurrentPass.UniqueID %>:{
required: "#<%=NewPass1.ClientID %>:filled"}
<%=NewPass2.UniqueID %>:{
required: "#<%=NewPass1.ClientID %>:filled"}
}, messages:{}
});
});