Custom JS Validation in CFFORM - Validating multiple email addresses
This is another entry about customizing ColdFusion's built-in JavaScript validation. One form that I work with here allows a user to enter multiple email addresses separated by a comma or semi-colon. The thing is, I can't use an attribute of validate="email" on the input because it will always fail due to there being multiple email addresses, semi-colons and commas.
Here is a little bit of custom JavaScript validation that I developed so that we can continue to use the CFFORM's validation, validate the multiple email addresses that may be entered and limit the number of email addresses that can be submitted.
Basically, we just don't use validate="email" but harness the function CF uses to do this and check the emails against it as we loop through them. Here is the Javascript:
function validateForm(theForm){
//Custom JS Validation here
arrEmails = theForm.receive_email.value;
var splitReg = /([;,])/; //regex with how I want to split the emails
var c=0;
var e=0;
var valueArray = arrEmails.split(splitReg); //create an array of emails based on the delimiter regex above
for(var i=0; i<valueArray.length; i++){
if(valueArray[i] != "," && valueArray[i] != ";"){//check and make sure the array value is what should be an email and not a delimiter
c = c + 1; //this is our count of total email addresses entered
if (!_CF_checkEmail(valueArray[i], true)){ //this is the same function CF uses when validate="email"
e = e + 1; // this is a count of how many emails failed validation
}
}
}
if(c > 3){ // if there are more than 3 addresses then give them an error
alert("You may enter up to 3 email addresses at a time.");
return false;
}
if(e > 0){ // if there are any errors in the email validation, give them an error
alert("Please use the format: name@server.domain for your friend's email address. If entering multiple addresses, please separate with a comma (,) or semi-colon (;) and do not use spaces.");
return false;
}
//End Custom JS Validation
doCFvalidate = _CF_checkemailThis(theForm); // this runs the CFForm validation and returns a boolean value
if(doCFvalidate) { // passed the CFForm validation, so submit
theForm.submit();
} else { // failed cfform validation
return false;
}
}
</script>
Here is the pertinent portion of my form (note how I still use the built-in function for making sure this field is required):
Recipient Email: <cfinput TYPE="Text" NAME="receive_email" MESSAGE="You must enter a value in 'Recipient Email'" REQUIRED="Yes">
<br><br>
<input type="button" value="Send Info" name="submit" class="js_submit" onClick="validateForm(document.emailThis)">
<noscript>
<input type="submit" value="Send Info" name="submit">
<style type="text/css">
.js_submit {display:none;}
</style>
</noscript>
</cfform>
And of course, make sure to duplicate all this JS validation server-side! (And check out why that <noscript> block is important here)
'Til next time, Bridget
There are no comments for this entry.
[Add Comment]