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:

view plain print about
1<script>
2    function validateForm(theForm){
3        //Custom JS Validation here
4        arrEmails = theForm.receive_email.value;
5        var splitReg = /([;,])/; //regex with how I want to split the emails
6        var c=0;
7        var e=0;
8        var valueArray = arrEmails.split(splitReg); //create an array of emails based on the delimiter regex above
9        for(var i=0; i<valueArray.length; i++){
10            if(valueArray[i] != "," && valueArray[i] != ";"){//check and make sure the array value is what should be an email and not a delimiter
11                c = c + 1; //this is our count of total email addresses entered
12                if (!_CF_checkEmail(valueArray[i], true)){ //this is the same function CF uses when validate="email"
13                     e = e + 1; // this is a count of how many emails failed validation
14                }
15            }
16        }
17        if(c > 3){ // if there are more than 3 addresses then give them an error
18            alert("You may enter up to 3 email addresses at a time.");
19            return false;
20        }
21        if(e > 0){ // if there are any errors in the email validation, give them an error
22            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.");
23            return false;
24        }
25        //End Custom JS Validation
26        
27        doCFvalidate = _CF_checkemailThis(theForm); // this runs the CFForm validation and returns a boolean value
28                
29        if(doCFvalidate) { // passed the CFForm validation, so submit
30             theForm.submit();
31        } else { // failed cfform validation
32         return false;
33        }
34    }
35</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):

view plain print about
1<cfform action="?" method="post" NAME="emailThis" id="emailThis">
2Recipient Email: <cfinput TYPE="Text" NAME="receive_email" MESSAGE="You must enter a value in 'Recipient Email'" REQUIRED="Yes">
3<br><br>
4<input type="button" value="Send Info" name="submit" class="js_submit" onClick="validateForm(document.emailThis)">
5
6<noscript>
7    <input type="submit" value="Send Info" name="submit">
8    <style type="text/css">
9        .js_submit {display:none;}
10    </style>
11</noscript>
12</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

This entry was posted on August 20, 2009 at 3:15 PM and has received 1287 views. There are currently 0 comments. Print this entry.