ember, ember-validations match password and confirmation - javascript

I've been successful in modifying the default classes and the negative class values to make sure that my ember-validations appear the way I want them to on load. Now, I'm diving into ember-validations. One of the validator routines I'm having little success with is the match: property. Here's the code from my controller:
userLoginPass: {
presence: { message: " password required" },
match: { property: { "userRegPassConfirm" } }
},
userRegPassConfirm: {
presence: { message: " confirm password required" },
match: { property: { "userLoginPass" } }
},
However, neither field barks on mis-match between them. Something is missing. Anyone had experience with this?
Here's the doc that's giving me problems: https://github.com/lcoq/ember-validations#match
Many Sincere Thanks!

Turns out the answer is a two part process which includes making sure the confirmation field is labelled whateverConfirmation in addition to the confirmation property like so:
password: {
confirmation: true,
presence: {
message: ' password required'
}
},
passwordConfirmation: {
presence: {
message: ' please confirm password'
}
}
as seen on the ember-validations documentation page:
https://github.com/dockyard/ember-validations#confirmation

You should define the validations object on your controller (or model) as follows:
validations: {
userLoginPass: {
confirmation: {
message: 'Your message here.'
}
}
}
And then put an {{input userLoginConfirmation}} within your template.

Related

Ajv keywords and custom error messages

I have written a schema but it does not seem to be validating as I was expecting. I'm assuming there is something wrong with my schema syntax but cannot figure it out. I expect not to see error messages for title or target until fundraiser is complete since they are only required if fundraiser is completed. I've tried many combinations but none of them are working as expected, these two are the closest I've come to what I need.
Schema attempt one: shows 4 error messages, 3 required errors and 1 error saying data should match "then" schema.
const schema = {
required: ['fundraiser'],
if: {
properties: {
fundraiser: { type: 'string' },
},
},
then: {
required: ['title', 'target'],
},
errorMessage: {
required: {
fundraiser: 'Please select an option',
title: 'Please enter a title',
target: 'Please enter a target',
},
},
};
Schema attempt two: shows 2 error messages, 1 required error and 1 error saying data should match "then" schema which is correct but then when I complete fundraiser valid becomes true which is when I expect to then see required errors for title and target. Also no errors have my defined custom error messages.
const scema = {
if: {
properties: { fundraiser: { minLength: 2 } },
then: { required: ['title', 'target'] },
},
then: { required: ['fundraiser'] },
errorMessage: {
required: {
fundraiser: 'Please select an option',
title: 'Please enter a title',
target: 'Please enter a target',
},
},
};
I am pretty sure that I am doing something wrong with my schema but it is not clear from the documentation how to use if/then in combination with custom error messages using ajv-errors. Any help would be greatly appreciated! Thanks!
The problem with the first schema is that subschema inside “if” is valid, unless fundraiser property is present and not a string. It would probably work as you expect if you add type: 'object' to the root schema and move required inside “if” subschema.
The problem with the second subschema is that the first “then” that has no “if” in the same schema object is ignored (unless you are using ajv-keywords that implemented if/then/else somewhat differently from how it is defined in draft-07 of JSON Schema spec) and the subschema inside “if is valid even if fundraiser property is absent and the second “then” can only pass if fundraiser is present.

Validation Taking 5-10 sec on Form Submit

I have a very simple registration form only requiring a username, email, and password. I am trying to see why it takes 5-10sec to complete the registration after the user submits. I tried profiling on the server-end (see here), and have eliminated that as the problem.
It looks like my issue is the client-side validation. I am using the https://jqueryvalidation.org/ JS file plus another custom file that tells the user if they are trying to use a name or password that already exists:
$('.register-form').validate({
submitHandler: function(form){
$('.register-form').submit();
},
rules: {
password: {
required: true
},
tos: {
required: true
},
username: {
required: true,
remote: '/api/v1/users/username/'
},
email: {
required: true,
email: true,
remote: '/api/v1/users/email/'
},
},
messages: {
first_name: {
required: 'Please include your first name.'
},
last_name: {
required: 'Please include your last name.'
},
password: {
required: 'Please create a password'
},
tos: {
required: 'Please check that you agree to our TOS and Privacy Policy'
},
email: {
required: 'Please include your email.',
email: 'Please insert a valid email address.',
remote: 'This email is already in use.'
},
username: {
required: 'Please create a username.',
remote: 'This username is already in use.'
}
}
});
When I use Chrome's profiling (picture link), it looks like the problem is about 10sec of thousands of tiny tasks where register.js and the jquery.validator.js are calling each other. Specifically, its always submitHandler: function(form) line that is triggered on register.js. So I think I see the problem, but I am not clear on how to interpret it or fix it.
Any ideas? I am pretty new to using these validation plug-ins.
this line
$('.register-form').submit();
should read
form.submit();
so the function should look like this
$('.register-form').validate({
submitHandler: function(form) {
form.submit();
},
rules:...
});
other wise you keep recursively calling submit
from the documentation
Example: Use submitHandler to process something and then using the default submit. Note that "form" refers to a DOM element, this way the validation isn't triggered again.
https://jqueryvalidation.org/validate/

Jquery Validation, Show Custom message with value from id

I Use jquery.validate.js for field validation.
Its display error messages as per declare in .js file for appropriate field.
I use this code for custom validation for email field.
<script type="text/javascript">
$().ready(function() {
$("#formcustomplan").validate({
email: {
required: true,
email: true
},
messages: {
email: "Email is required in valid format"
}
});
});
</script>
Its display message like that "Email is required in valid format"
But I want that error message fetch email id and display it in error message.
(Ex. if I enter test.com in email box. it should display "test.com is not valid email" in error message)
Here is Fiddle
JQuery Validate actually supports functions as messages directly, so you don't have to do anything super hacky to make this work. It is not well documented but you can do this:
messages: {
email: {
email: function (params, element) {
return '"'+$(element).val()+'" is not a valid value';
}
}
}
Quote from the docs:
Each message can be a String or a Callback. The callback is called in
the scope of the validator, with the rule’s parameters as the first
argument and the element as the second, and must return a String to
display as the message.
Working example: http://jsfiddle.net/ryleyb/XUM8k/11/
You can reset the default email validation message by using:
$.validator.messages.email = "Your custom message for email field"
In your case, you can prepend the new value from user's input to the custom message. Here is the trick using keyup:
$('.email').keyup(function () {
$.validator.messages.email = $('.email').val() + ' is not valid email';
});
$("#formcustomplan").validate({
email: {
required: true,
email: true
}
});
Updated Fiddle

jQuery Form Validation - success + showErrors

I'm using the jQuery Validation Plugin and want to run my own code when the plugin detects a valid or invalid input.
I've figured out that the two .validate() options I need are success and showErrors and I can get them both to work on their own:
var validator = $('#form').validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
success: function() {
console.log('success');
}
That logs success any time a valid input is made. And showErrors works correctly also:
var validator = $('#form').validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
showErrors: function() {
console.log('error');
}
But when I try to combine the two, error is logged every time regardless of whether the input is valid:
var validator = $('#form').validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
success: function() {
console.log('success');
},
showErrors: function() {
console.log('error');
}
The order of the options doesn't have any effect.
Does anyone know why the two options don't work together and how I can run my own functions on valid and invalid inputs?
"showErrors" is not called just when an error is detected, it's called everytime you change the input, regardless the value you typed.
"showErrors" receives two parameters: "errorMap" and "errorList". To verify if there really was an error you have to check one of those values:
showErrors: function(errorMap, errorList) {
if (errorsList.length > 0) {
console.log('error');
}
}
You can also handle the "success" event inside the showErrors function, since it's called in the current validator context.
showErrors: function(errorMap, errorList) {
if (errorsList.length == 0) {
this.currentElements.addClass("success");
}
}
Figured it out... sort of.
I replaced showErrors with highlight, which allows me to run a callback on either valid or invalid entries.
However, the plugin still displays the default error messages -- probably since I'm not doing anything with showErrors. So I had to hack that by setting an empty string for the message on each field:
var validator = $('#form').validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: '',
email: ''
},
success: function() {
console.log('success');
},
highlight: function() {
console.log('highlight');
}
}
Certainly not as clean as I would like, so if anyone has a better way that would be great.

Custom error messages for Groups within the jQuery Validation plugin

I'm using the jQuery Validation plugin and i've started to group some of my fields together:
groups: {
fullName: "myFirstName myLastName"
},
I've also added the fields to the rules section so that they are validated:
rules: {
myFirstName: {
required: true
},
myLastName: {
required: true
}
},
This works great and produces an error of "This field is required" for the group.
My question lies with custom error messages. I have the following setup:
messages: {
fullName: "Please enter both your first name and your last name"
}
Unfortunately the custom error doesn't show, only the generic one.
Does anyone have any ideas?
You have to use errorPlacement for this, and the message should be the same on both, for example:
messages: {
myFirstName: { required: "Please enter both your first name and your last name" },
myLastName: { required: "Please enter both your first name and your last name" }
}
Then, assuming they have the same IDs here, your errorPlacement option would look like this:
errorPlacement: {
var n = element.attr("name");
if (n == "myFirstName" || n == "myLastName")
error.insertAfter("#myLastName");
else
error.insertAfter(element);
}
The group itself has no message, it's just telling the plugin that they share a message label.

Categories