Develop Reference

How can I make two message in password confirmation in jQuery validate?

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/
If user input password : abcdef, then click button validate, there exist messsage : "Please confirm your password"
If user input password confirmation : ghijkl, there exist message : "Please confirm your password"
I want to change the message if user input password confirmation not same
The message like this : "confirm your password is not the same"
So there exist two message :
If user not input password confirmation, the message : "Please confirm your password"
If user input password confirmation, but not same with password, the message : "confirm your password is not the same"
How can I do it?

I think this will cover what you're looking for. You aren't limited to one message per input - you can set one for each rule on each input. I added a break in your HTML to make it more readable.
<form class="validatedForm" id="commentForm" method="get" action="">
<fieldset>
<input name="password" id="password" /><br/>
<input name="password_confirmation" id="password_confirmation" />
</fieldset>
</form>
<button>Validate</button>
Updated script:
jQuery('.validatedForm').validate({
rules: {
"password": {
minlength: 6,
required: true
},
"password_confirmation": {
equalTo: "#password"
}
},
messages: {
"password": {
minLength: "Password must be at least 6 charachters",
required: "Password is required."
},
"password_confirmation": {
equalTo: "The password and confimation fields don't match"
}
},
});
$('button').click(function () {
console.log($('.validatedForm').valid());
});
I added a required rule to the password so clicking validate with a blank form generates a message. I removed the minlength on the confirmation- it only needs to be equal to the password, and it has a minlength. Too short of a password has its own message, and when the password is long enough you'll get a different message when the confirmation field is empty or otherwise not equal to the password. You can see it in the fiddle here: http://jsfiddle.net/oscar11/fEZFB/609/

Meteor.js Validation w/ Mesosphere

I'm trying to implement Mesosphere for validation into my meteor app but it seems like Mesosphere isn't picking up on some of the native validations I've listed.
I tried just a single validation for formatting of email and it's required length. For example:
Mesosphere({
name: 'signupForm',
method: 'signupUser',
fields: {
email: {
required: true,
format: 'email',
rules: {
exactLength: 4
},
message: 'Wrong length'
}
},
onFailure: function (errors) {
messages = [];
messages = _.map(errors, function (val, err) {
console.log(val.message);
});
},
onSuccess: function (data) {
alert("Totally worked!")
}
});
The 'onFailure' (and onSuccess) callback seems to work because it is logging something when I submit the form. Which makes me believe I have it set up properly on the form submit event too. There you pass the form object to Mesosphere to create the validationObject if I understand it correctly. For example:
var validationObject = Mesosphere.signupForm.validate(accountData);
Once submitted, it's logging Field Required as the error which is weird because I did type something into the field. It makes no mention of an incorrect length or format. It skips the 'Wrong Length' message and I can't find that message in the object anywhere.
So my question is what am I doing wrong to not be getting the proper message for the incorrect input for that form field? Thanks : )
Also, willing to take recommendations on other validation packages. Mesosphere leverages Meteor's server/client features for validation so it seemed like a good place to start.
Template:
<template name="signup">
<form name="signupForm" id="signup-form" class="panel" action="#">
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="email" id="email" class="form-control" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" />
</div>
<div class="form-group">
<input type="submit" value="Sign Up" id="create-account" class="btn btn-success pull-right">
</div>
</form> </template>
Which calls this method in the corresponding file:
signupUser: function(accountData) {
var uid = Accounts.createUser(accountData);
}

So basically what I see here is that your rules don't reflect how the form would be validated. You have an email that must match the email format, but then you have a rule that says it has to be exactly 4 characters long.. a better field definition would look like this:
fields: {
email: {
required: true,
format: 'email',
message: 'Please enter a valid email address'
},
password: {
required: true,
rules: {
minLength: 6,
maxLength: 30,
},
message: "Password must be between 6 and 30 characters"
}
}
I created a github repo that you can clone and run to test this out if you would like.
https://github.com/copleykj/meso-test
Hope this helps.

How to validate input fields with a dot in name using the jquery validation plugin?

I'm using this jquery validation plugin
<s:textfield cssClass="form-control input-default" name="contest.title" id="title" placeholder="Enter Title"
/>
Validation doesn't work for this, but if I change the name to title - validation works.
I tried searching, but couldn't find a means to validate fields with a . in their name.
Please help
Update
Script
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#contestform").validate({
submitHandler: function(form) {
// return false; // block the default submit action
},
rules: {
title: {
required: true
},
link: {
required: true
},
startdt: {
required: true
},
enddt: {
required: true
},
descr: {
required: true
},
},
messages: {
title: "Please enter a title",
link: "Please enter the sponser redirection link",
startdt: "Please select start date",
enddt: "Please select end date",
descr: "Please enter description"
}
});
});
</script>
Part of the form
<form action="" enctype="multipart/form-data" method="post" id="contestform">
<s:hidden name="option" value="option"/>
<s:hidden name="contest.idcontest"/>
<div class="form-group">
<label for="title">Title</label>
<s:textfield cssClass="form-control input-default" name="contest.title" id="title" placeholder="Enter Title"
/>
</div>

You need to put the field names in qoutes. From the plugin documentation
Fields with complex names (brackets, dots)
When you have a name attribute like user[name], make sure to put the
name in quotes. More details in the General Guidelines.
The sample in the linked reference:
$("#myform").validate({
rules: {
// no quoting necessary
name: "required",
// quoting necessary!
"user[email]": "email",
// dots need quoting, too!
"user.address.street": "required"
}
});

jQuery - Validate Password

I am trying to use jQuery to validate my two password fields with each other.
My code looks like this:
jQuery('#settingsForm').validate(
rules : {
npassword : {
},
pass_check : {
equalTo : '#npassword'
}
}
});
This is the HTML for the input fields:
<label for='npassword'>New Password</label>
<input type='password' class='span10 password_check' name='npassword' id='npassword' value='' placeholder='New Password'>
<div class='separator'></div>
<label for='pass_check'>Confirm New Password</label>
<input type='password' class='span10' name='pass_check' id='pass_check' value='' placeholder='Confirm New Password'>
<div class='separator'></div>
Although this doesn't do anything. What should I change? I am new to jQuery and Javascript in general.
Thanks in advance.

You should fill out the configuration for npassword, e.g. by using required: true. See here: http://jsfiddle.net/JtTgM/

1) You are missing an opening brace, {, right after .validate(:
jQuery('#settingsForm').validate({ // <-- opening brace { was missing
2) Maybe you want to specify the required rule for the first password field. Otherwise, when both fields are blank, they both match and the form is valid.
npassword: {
required: true
},
3) You can override the default messages with the messages option:
jQuery('#settingsForm').validate({
rules: {
npassword: {
required: true
},
pass_check: {
equalTo: '#npassword'
}
},
messages: {
npassword: {
required: "this field is required"
},
pass_check: {
equalTo: "the passwords must match"
}
}
});
Working DEMO: http://jsfiddle.net/vsLWg/

$( "#Form").validate({
rules: {
old_password: "required",
password: "required",
new_password: {
equalTo: "#password"
}
}
});

Jquery Validation on cloned elements

I am using the following JQuery validation:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
I have the following element:
<div class="form-item">
<label for="Reference_name" class="required">Name: <span class="required">*</span></label>
<input name="Reference[name][]" class="form-input validate {validate:{required:true,minLength:2,messages:{required:'Your name is required',minLength:'Your name is too short'}}}" id="Reference_name" type="text">
</div>
I have cloned the element but the validation is only appearing on the first element. I would like it to validate against the second too and show the error message label.
Can someone help with this please.

elements must be unique
<label for="Reference_name" class="required">Name:<span class="required">*</span></label>
<input type="text" id="Reference_name" name="Reference[Name]" id="Reference_name" required="required" maxlength="255" />
File Js
$(document).ready(function() {
validate_form();
});
function validate_form() {
$("#id_of_your_form").validate({
rules: {
'Reference_name': {
required:true,
minlength: 2,
}
},
},
messages: {
'Reference_name': {
required:"Your name is required",
minLength:'Your name is too short'
},
}
});
}
if you want to compare two fields
http://docs.jquery.com/Plugins/Validation/Methods/equalTo#other

Put your validation function in a global variable like this:
var validate_form_function = function(){
if($(".app-form").length > 0){
$('.app-form').validate({
rules: {
comment_message: {
required: true,
minlength: 2
}
},
messages: {
comment_message: {
required: "Your message",
minlength: "Your message"
}
}
});
}
};
Then revalidate your cloned form with the function like this :
validate_form_function();