Calling cfform validation from custom javascript functions
Problem
When you're using ColdFusion.Ajax.submitForm you typically invoke a custom javascript function to submit the form from the onClick of a button control rather than a submit control. This causes standard cfinput validation to be bypassed because the form is not submitted via a submit control.
Solution
ColdFusion creates a javascript function that is responsible for handling cfinput form validation. The function name is generated based on the name attribute of the cfform and can be called from custom javascript functions. For instance, a cfform named testValidator would have a validation function named _CF_checktestValidator where _CF_check precedes the name given to the cfform.
Detailed explanation
<cfajaximport tags="cfform, cfwindow">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>CFFORM Validation through
JavaScript</title>
<script type="text/javascript">
errorHandler = function(code, msg){
alert('Error: ' + code
+ ' Info: ' + msg);
}
validateFormData = function(){
var dataIsValid =
_CF_checktestValidator(testValidator);
if (dataIsValid ==
true){
submitForm();
}
}
submitForm = function(){
ColdFusion.Ajax.submitForm('testValidator',
'formprocs/procentry1.cfm', submitFormCallback, errorHandler);
}
submitFormCallback =
function(callbackMsg){
window.location =
'entry2.cfm';
}
</script>
</head>
<body>
<h2>Please enter your First and Last
Name to continue...</h1>
<cfform format="html"
name="testValidator">
First Name
<cfinput type="text"
name="firstName" required="yes" message="Please enter your First
Name.">
<br />
Last Name
<cfinput type="text"
name="lastName" required="yes" message="Please enter your Last
Name.">
<cfinput
type="button" name="btnNext" value="Next"
onClick="validateFormData()">
</cfform>
</body>
</html>
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
