jQuery Form Validation - success + showErrors - javascript

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.

Related

validate.js different functions on invalid

I'm using validation.js plugin and in the case I want it I was trying to make some changes to it but after a lot of thinking and testing and searching I got nothing , at least nothing I wanted...
I have this code:
$("#form").validate({
rules:
{
phone:
{
required: true,
number: true,
minlength: 6
}
},
messages:
{
phone:
{
required: 'This field is required',
number: 'Invalid phone number',
minlength: 'Minimum length: 6'
}
}
});
every thing is okay but I want it to run some different functions in addition to showing massages , for example when the user type sth less than 6 char , show massage AND RUN Function ONE , if the user type sth except nums it shows massage and also RUN Function TWO
sth like this:
$("#form").validate({
rules:
{
phone:
{
required: true,
number: true,
minlength: 6
}
},
messages:
{
phone:
{
required: 'This field is required',
number: 'Invalid phone number' + function TWO,
minlength: 'Minimum length: 6' + function ONE
}
}
});
can anyone help me please?
You can use a callback function instead of a string as the value for a custom message. Just make sure to return the message from that function. That way you can do any operation before outputting the message. The callback function takes two arguments, first is the value being passed to the rule, and second is the element.
messages
...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.
messages:
{
phone:
{
required: 'This field is required',
number: function(rule, elem) {
doSomeStuff('run before number message');
return 'Invalid phone number';
},
minlength: function(rule, elem) {
doSomeStuff('run before minlength message');
return 'Minimum length: 6';
}
}
}
Check the -- JSFiddle Example -- here.

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/

Validate date values in Meteor AutoForm SimpleSchema

I have the following Schema:
Dates.attachSchema(new SimpleSchema({
description: {
type: String,
label: "Description",
max: 50
},
start: {
type: Date,
autoform: {
afFieldInput: {
type: "bootstrap-datepicker"
}
}
},
end: {
type: Date,
autoform: {
afFieldInput: {
type: "bootstrap-datepicker"
}
}
}
}));
How can I validate that the end date is not before start? I am using MomentJS to handle date types, however my main problem is how I can access other attributes in the custom function.
For instance:
end: {
type: Date,
autoform: {
afFieldInput: {
type: "bootstrap-datepicker"
}
},
custom: function() {
if (moment(this.value).isBefore(start)) return "badDate";
}
}
How can I access start?
Furthermore, how can I validate if the start + end date combination is unique, meaning there is no document saved in my database which has the exact same start and end date?
For the inter-field communication, you can do:
end: {
type: Date,
autoform: {
afFieldInput: {
type: "bootstrap-datepicker"
}
},
custom: function() {
// get a reference to the fields
var start = this.field('start');
var end = this;
// Make sure the fields are set so that .value is not undefined
if (start.isSet && end.isSet) {
if (moment(end.value).isBefore(start.value)) return "badDate";
}
}
}
You should of course declare the badDate error first
SimpleSchema.messages({
badDate: 'End date must be after the start date.',
notDateCombinationUnique: 'The start/end date combination must be unique'
})
Regarding the uniqueness, first of all simple schema itself does not provide uniqueness check. You should add aldeed:collection2 for that.
Furthermore, collection2 is capable of checking only a single field uniqueness. To accomplish compound indexes, you should use the ensureIndex syntax
Dates._ensureIndex( { start: 1, end: 1 }, { unique: true } )
Even after this, you will not be able to see the error from this compound index on your form because autoform needs to be aware that such error is existing.
AutoForm.hooks({
NewDatesForm: { // Use whatever name you have given your form
before: {
method: function(doc) {
var form = this;
// clear the error that gets added on the previous error so the form can proceed the second time
form.removeStickyValidationError('start');
return doc;
}
},
onSuccess: function(operation, result, template) {
if (result) {
// do whatever you want if the form submission is successful;
}
},
onError: function(operation, error) {
var form = this;
if (error) {
if (error.reason && error.reason.indexOf('duplicate key error')) {
// We add this error to the first field so it shows up there
form.addStickyValidationError('start', 'notDateCombinationUnique'); // of course you have added this message to your definition earlier on
AutoForm.validateField(form.formId, 'start');
}
}
}
}
});

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.

JQuery validate: how to place error messages inside the input's title attribute

Due to space limitations I'm trying to place the error messages for a form inside tooltips.
$("form").validate({
rules: {
username: { required: true, email: true },
password: "required"
},
onkeyup: true,
success: "valid",
errorPlacement: function(error, element) {
var msg = errorList[i].message;
element.attr('title', msg);
}
});
The element.attr part works fine- I'm just having trouble extracting the message to put in it. Where does it reside?
There are several issues with your code
errorList is undefined
i is undefined
but this should just work fine I guess (although I don't know how the plugin reacts as it probably expects the error element to be inserted into the DOM after this callbacK)
errorPlacement: function(error, element) {
element.attr('title', error.text());
//or if that doesn't work try also
//element.attr('title', error[0].text);
}

Categories