I'm performing form validation using JQuery/AJAX. When an entry is missing or malformed, I want to send a message via alert() and return the user to the form with all fields as they were so the user can edit them and try submitting the form again. I also don't want the user to get a series of alert() boxes for each field that is malformed, but rather the first field that is discovered to be malformed should issue an alert() box; upon clicking the alert() box, the user may then return to editing the form. If there are 6 malformed fields, I don't want a series of 6 consecutive alert() boxes, but rather just the first one discovered by the routine to be errant and a return to the form (eventually the user will get them all right).
I have utilized a method that works, although it's not elegant and rather tedious to edit and error-prone...it's like a series of Russian dolls, where the first error prevents the successive routines from being run. When there are 5 fields or fields that require multiple kinds of integrity checking, the number of nested IF-ELSE statements increases exponentially, and for forms where I'm passing data via GET to a PHP file, like this:
$.get('admin_email_length_check.php', { new_email: $('#new_email').val(), max_email_length: max_email_length }, function(data) {
if (data != 0) {
alert(data);
} else {
...it has to be closed out with:
}
});
...not just a simple:
}
But here's a short routine for a 2 field validation. I set allow_submit to FALSE and prevent submission until all integrity checks are passed, at which point allow_submit becomes TRUE and I dynamically re-submit the form; this means that the integrity check (and its e.preventDefault();) will be bypassed entirely and the form will then be processed. Again, it works, but the kind of IF-ELSE structures I need to construct for forms with many fields that require many types of form validation requires extremely LONG structures with carefully edited closing braces (or braces + parentheses + ;, etc.) Is there a shorter or more elegant way to do this?:
var allow_submit = false;
$('#change_password_form').on('submit', function(e) {
if (!allow_submit) {
e.preventDefault();
// First ensure that at least one of the fields has a value:
if (($('#new_password').val() == '') && ($('#retype_password').val() == '')) {
alert("Nothing specified in either of the 'Change Password' fields.\n\nAdd data and re-submit.\n");
} else {
// Ensure both fields are filled:
if (($('#new_password').val() == '') || ($('#retype_password').val() == '')) {
alert("When changing your password, both the 'New Password' and the 'Retype Password' fields must be filled.\n\nPlease supply new, matching passwords in both fields and re-submit.\n");
} else {
// Do the two fields match?
if ($('#new_password').val() != $('#retype_password').val()) {
alert("New Password fields do not match.\n\nPlease edit password fields and re-submit.\n");
} else {
allow_submit = true;
$('#change_password_form').submit();
}
}
}
}
});
I have two suggestions:
Use early return statements to de-nest your code a bit.
Whenever you have too much conditional logic, try to use a data structure instead. See this quote by Linus Torvalds.
Here is my attempt:
$('#change_password_form').on('submit', function(e) {
var data = collect_data();
if (!data_is_valid(data)) {
e.preventDefault();
} else {
// Submit.
}
});
function collect_data() {
return {
passwords {
new_: $('#new_password').val(),
retyped: $('#retype_password').val()
},
...
};
}
function data_is_valid(data) {
if (!password_is_valid(data.passwords)) {
return false;
}
...
return true;
}
function password_is_valid(passwords) {
for (var i = 0; i < password_validators.length; i++) {
var validator = password_validators[i];
if (!validator.fails(passwords)) {
alert(validator.message);
return false;
}
}
return true;
}
var password_validators = [
{
fails: function(passwords) {
return passwords.new_ === '' && passwords.retyped === '';
},
message: 'No password provided'
},
{
fails: function(passwords) {
return passwords.new_ !== .passwordsretyped;
},
message: 'Passwords do not match'
},
...
];
Related
I need to make flash error messages change according to the type of validation error. Right now it always says: Database error if one of my custom validations doesn't pass.
My custom validations happen in my model, and not in my controllers, so I am not sure how to traverse between the two.
Here is one of my custom validations:
User.schema.path('email').validate(function (value) {
if (validator.isEmpty(value) || validator.isEmail(value)) {
return true;
}
else {
return false;
}
});
The validation works perfectly, it's just the flash message that I want to change.
You can pass custom error messages to the validate function as well, just pair it with the function by wrapping it in an array, like this:
User.schema.path('email').validate([function (value) {
if (validator.isEmpty(value) || validator.isEmail(value)) {
return true;
}
else {
return false;
}
}, "WRONG!"]);
On CRM 2013 on-premise, I'm working to write a javascript that checks for email validation. The field can contain a list of email address, however if the email is not valid, it will not let the users save the form.
I got the splitting and validating to work fine now.
However I continue to have problems to prevent users from saving the form.
On the OnChange, I check the box on the "Pass execution context as first parameter"
I user the preventDefault() function as suggested by an MSDN article however I keep getting error message "Unable to get property 'preventDefault' of undefined or null reference".
Any idea is appreciated. Here's my code:
function EmailTest(EmailField)
{
var Email = /^([a-zA-Z0-9_.-])+#([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
if(Email.test(EmailField))
{
return true;
}
else
{
return false;
}
}
function CheckEmailString(context)
{
try
{
var EmailString = context.getEventSource().getValue();
if (EmailString != null)
{
var separator = [" ", ",", ";", "|"];
var EmailArray = EmailString.split(separator);
var Flag = true;
for(var i = 0;i < EmailArray.length;i++)
{
if(!EmailTest(EmailArray[i]))
{
Flag = false;
break;
}
}
if(Flag != true)
{
alert("The list of emails entered contain invalid email format. Please re-enter");
context.getEventArgs().preventDefault();
}
}
}
catch(err)
{
alert(err.message);
}
}
you get the error
Unable to get property 'preventDefault' of undefined or null reference
because the getEventArgs is available only when you are inside the save event, it's not available inside onchange event.
You should add the validation check also inside the save event if you want to stop the save.
Could I suggest you might try updating it to the full version of the method ie
Xrm.Page.context.getEventArgs.preventDefault().
I understand when working in CRM you have to reference use the full names in order for your function to see the prevent default method.
Hopefully that helps but if not good luck in seeking a solution
Okay, so I am attempting to validate on the server side. I am using Windows Azure Mobile Services for my Android application. The validation is done in Javascript / Node.js.
I have been doing my best to find solutions to my issue and stumbled upon [this link] (http://blogs.msdn.com/b/carlosfigueira/archive/2012/09/21/playing-with-the-query-object-in-read-operations-on-azure-mobile-services.aspx)!
I intend to use regexp to validate the object before persisting it to the DB.
I would understand how to do this 'pre-query' but as I need access to use regex, I must perform 'post-query' filtering.
Below is the code in which I have (so far) but I want to know how can I validate many fields and deliver appropriate error messages for each invalid fields. If all are valid, then persist to the DB.
Thanks in advance!
function insert(item, user, request) {
var userTable = tables.getTable('User');
userTable.where({email: item.email}).read({
success: emailExists
});
function emailExists(existingItems)
{
if (existingItems.length > 0)
{
request.respond(statusCodes.CONFLICT,
"An account is already registered with this email!.");
}
else
{
// Insert the item as normal.
request.execute({
success: function (results)
{
var regexEmail = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var filtered = results.filter(function(item)
{
return regexEmail.test(item.email);
});
request.respond(statusCodes.OK, filtered);
}
});
}
}
}
If I understand what you want to do correctly, you first need to validate the input's e-mail against the items in the database (to maintain unicity), then validate other fields in the input before inserting that. If that's the case, then after the query validation (to prevent duplicate e-mails) you can validate the item fields individually, as shown in this document. The code below shows an example of such validation.
function insert(item, user, request) {
var userTable = tables.getTable('User');
userTable.where({email: item.email}).read({
success: emailExists
});
function emailExists(existingItems)
{
if (existingItems.length > 0)
{
request.respond(statusCodes.CONFLICT,
"An account is already registered with this email!.");
}
else
{
// Validate fields *before* inserting
var regexEmail = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!regexEmail.test(item.email)) {
request.respond(statusCodes.BAD_REQUEST, { error: 'E-mail is invalid' });
return;
}
if (!item.name || item.name.length < 10) {
request.respond(statusCodes.BAD_REQUEST, { error: 'Item must have a name of at least 10 characters' });
return;
}
// If all validation succeeded, then insert the item
request.execute();
}
}
}
I have two forms on different pages of my website, however I want to re-use the javaScript validation. So for example:
function notnull() {
var firstName = document.forms["newsletter"]["firstName"].value;
if (firstName === null || firstName === "") {
inlineMsg('firstName', 'You must enter your name.', 3000000);
return false;
} else {
return true;
}
}
This code is only good for my newsletter form (e.g. document.forms["newsletter"]["firstName"].value) but I want to use it for my "contact" form too.
Can I build the variables up dynamically like document.forms[][].value?
You can change your notnull function to accept 2 parameters
function notnull(formType,fieldName){
var fieldName = document.forms[formType][fieldName].value;
if(fieldName === null || fieldName === "") {
inlineMsg(fieldName, 'You must enter your '+fieldName,3000000);
return false;
} else
return true;
}
something along that line. I'm unsure what your inlineMsg does. You can also alternatively pass in the error friendly name for your error message into the function.
I'm sure there are better approach of handling the above, but looking at your code only, that's what I would suggest.
So here's my problem.
I'm currently working on a PhoneGap application using jQuery Mobile and the Validation jQuery plugin for form validation.
I'm trying to set up a custom rule so that it will check to see if a name is already in the database, and if so, prevent the form from being submitted until the user chooses a name that is unique.
The problem is one that I've encountered before but have not yet managed to properly solve. When I call the method that executes the SQL select statement, the success callback does not get completed until after the validator has already completed and thrown false. This means that if a user enters a unique name, it will display an error, but if the user forces it to re-validate the fields, it will then be valid because the success callback had, in the meantime, completed.
Here's the relevant code:
var nameUnique;
jQuery.validator.addMethod("nameIsUnique", function(value, element) {
checkNameSQL();
return this.optional(element) || nameUnique;
}, "This name is already in use. Please choose another.");
$('#createForm').validate({
rules: {
createName: {
required: true,
nameIsUnique: true
},
createDescription: {
required: true
}
},
//snip//
});
function checkNameSQL()
{
var name = document.forms['createForm'].elements['createName'].value;
if (!(name == null || name == ""))
{
dbShell.transaction(function(tx) {
tx.executeSql("SELECT STATEMENT",[name],function(tx,results){if(results.rows.length==0){nameUnique = true;}},errorHandler)
},errorHandler);
}
}
I've simplified it where it makes sense, cutting out code not relevant to the question. As you can see, I call the method to check if the name exists, but before the success callback function triggers to set nameUnique to true, it's being returned by the validator, causing a false error.
How should I change my code to prevent this from occurring? What general programming practices should I follow to circumvent similar problems in the future? Thanks!
You can return pending as a value from the addMethod() besides true and false which can be used to delay the validation. For more info you can check the source of validation library.
Try this way:
$.validator.addMethod("nameIsUnique", function(value, element) {
var validator = this;
var previous = this.previousValue(element);
checkNameSQL(value, function(status) {
var valid = status === true;
if (valid) {
var submitted = validator.formSubmitted;
validator.prepareElement(element);
validator.formSubmitted = submitted;
validator.successList.push(element);
validator.showErrors();
} else {
var errors = {};
var message = status || validator.defaultMessage(element, "remote");
errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
validator.showErrors(errors);
}
previous.valid = valid;
validator.stopRequest(element, valid);
});
return "pending";
}, "This name is already in use. Please choose another.");
function checkNameSQL(name, callback) {
if (!(name == null || name == "")) {
dbShell.transaction(function(tx) {
tx.executeSql("SELECT STATEMENT", [name], function(tx, results) {
if (results.rows.length == 0) {
nameUnique = true;
callback(true);
}else{
callback(false);
}
}, errorHandler)
}, errorHandler);
}
}
For demo check this fiddle - http://jsfiddle.net/dhavaln/GqsVt/