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.
Related
I have been trying many times with JQuery for validating errors using customized messages, but I am still confused that where I am making the mistake.I have tried with the normal validating messages, but when I tried with the customized, it shows me an error.
Below is the sample code which i have tried so far and unsucessful in executing it.
<form id="myform">
<tr>
<td class="alpha">username</td>
<td>
<input type="username" type="text" value="">
</td>
</tr>
<br/>
<tr>
<td class="alpha">postcode</td>
<td>
<input type="postcode" type="text" value="">
</td>
</tr>
<input type="submit" />
</form>
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});
$document.ready(function() {
$("#myform").validate({
rules: {
password: "required",
postcode: {
required: true,
minlength: 3
}
},
messages: {
username: {
required: "*Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
postcode: {
required: "Field PostCode is required",
minlength: "Field PostCode must contain at least 3 characters"
}
}
});
});
As written, your code would not work with the default messages either.
Please read my comments in the code...
rules: {
password: "required", // <- input with name="password" (where is "password"?)
postcode: { // <- input with name="postcode"
required: true,
minlength: 3
}
},
messages: {
username: { // <- input with name="username"
required: "*Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
postcode: { // <- input with name="postcode"
required: "Field PostCode is required",
minlength: "Field PostCode must contain at least 3 characters"
}
}
The rules and messages objects' parameters are keyed by the name attribute of the input element. Your input elements do not contain any name attributes. The plugin mandates that all form inputs contain a unique name, and the plugin will not work without these.
You have invalid values for the type attribute. There are no such things as type="username" and type="postcode"; and you erroneously have more than one type attributes on each input, <input type="username" type="text" value="">
In your case, you don't even attempt to define any rules for a username field. You only have password and postcode within the rules object.
Fix your invalid HTML markup and JavaScript...
Remove all extraneous type attributes from each input.
Add a unique name attribute to each input.
Only reference your name attributes within rules and messages objects.
DEMO: jsfiddle.net/2tx6u7wf/
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/
// Register form validation
$('.register-form')
.form({
on: 'blur',
fields: {
registerEmail: {
identifier : 'registerEmail',
rules: [{
type : 'email',
prompt : 'Please enter a valid email address.'
}]
},
registerPassword: {
identifier : 'registerPassword',
rules: [{
type : 'empty',
prompt : 'Please enter a password.'
}]
},
registerPasswordVerify: {
identifier : 'registerPasswordVerify',
rules: [{
type : 'match[registerPassword]',
prompt : 'Your passwords do not match.'
}]
}
},
onSuccess: function() {
$scope.createUser();
console.log("Passed");
},
onFailure: function() {
console.log("Failed");
}
});
Not sure what is wrong here exactly, but I'm simply trying to get the two password fields to match but I keep getting the "Your passwords do not match" error. Here's my HTML as well:
<div class="field">
<label>Password</label>
<input type="password" name="registerPassword" ng-model="password">
</div>
<div class="field">
<label>Verify Password</label>
<input type="password" name="registerPasswordVerify">
</div>
I had the same problem. After trying few options, i realize that registerPassword inside match[registerPassword] is undefined. match is not looking for name of the input, but the id of the input.
So if you put id="registerPassword" in your password input. That should work. I don't know why this is not in the documentation.
you will working just add id name of every input
Password
<div class="field">
<label>Verify Password</label>
<input type="password" name="registerPasswordVerify" id="registerPassword">
</div>
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"
}
});
I have a simple login form and have jQuery validate replacing the field labels when there's an error to display. The problem is that, once the error is cleared, the label disappears. I would like to find a way to revert back to the previous label's content, or rebuild that label when the field is valid...
Here's my code:
$(document).ready(function(){
$("#login").validate({
errorPlacement: function(error, element) {
element.prev().replaceWith(error);
},
rules: {
"email": {
required: true,
email:true,
},
"password": {
required: true,
minlength: 6
}
},
messages: {
email: {
required: "Please enter your email address.",
email: "Please enter a <u>valid</u> email address"
},
password: {
required: "Please enter your password.",
minlength: "Please enter a password with 6 characters or more."
}
},
});
});
And the HTML:
<form name="login" id="login" method="post" action="authenticate.php">
<p>
<label for="email">Email Address:</label>
<input type="text" name="email" id="email" class="required email" />
</p>
<p>
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="required" />
</p>
<p>
<input type="submit" value="Log In" id="submit" />
</p>
In essence, when the user submits the form, if there's no data in the Email field, then the label for email gets replaced with the error. But once it has valid input, I want to put back the original label.
Thanks in advance for any suggestions,
Z
I actually worked out a compromise whereby, instead of replacing the previous label with the error label, I'm appending a span into that label using error.appendTo(element.prev()) and errorElement: "span". Here's the new code:
$(document).ready(function(){
$("#login").validate({
errorElement: "span",
errorPlacement: function(error, element) {
error.appendTo(element.prev());
//element.prev().replaceWith(error);
},
rules: {
"email": {
required: true,
email:true,
},
"password": {
required: true,
minlength: 6
}
},
messages: {
email: {
required: " is Required",
email: " is Improperly Formatted"
},
password: {
required: " is Required",
minlength: " is not Long Enough"
}
},
});
});
It's less than ideal, but at least when the span appears, the error code is where I want it to be, and when it disappears, the label remains intact. I just made it so the label and the error complete each other like sentences... Eg, "Email Address" " is required." or "Email Address" " is not properly formatted."
Thanks to everybody that contributed here,
Z
You can remove
errorPlacement: function(error, element) {
element.prev().replaceWith(error);
},
and the messages should appear beside the textboxes instead.
You can try to removeChild(label),and attach a new one to it when the error accur. Toggling the label seems to make sence