I have a coldfusion page that I include the jquery library in. I have a section where there are text inputs for the user to enter info, and then save to database. I don't have a form tag in here but just 3 input fields.
I started implementing jquery solution to this but not sure on how to proceed. First, I need to validate all 3 of the text fields. If any of those fails validation, I need to display an alert box with all the error fields and then also add a line in red just below the failed input's text box (like an addClass in jquery or something), and return false.
Second, if all the validation is successful, then I need to do a $.ajax and call a method in a cfc, pass in the params, then in the cfc's method do the database actions and then return an alert box that data was successfully saved as well as add a div with text in green and a check mark.
Here's what I have so far:
<!---.cfm with text inputs--->
is is where I need to display the results of the operation---></div>
<input type="text" name="txt1" id="txt1" value="#school_name#" />
<!---this is where I need to display in red if txt1 fails validation--->
<input type="text" name="txt2" id="txt2" value="#school_dist#" />
<!---this is where I need to display in red if txt2 fails validation--->
<input type="text" name="txt3" id="txt3" value="#school_principal_i
<!---this is where I need to display in red if txt3 fails validation--->
<td><input type="button" name="save" id="save" value="save info" /></td>
<!---end .cfm page--->
/*this is where I need to do the validation:
txt1: not blank and regular expression to make sure there are no special characters except underscore(_)
txt2: same as above
txt3: not mandatory but if not blank, check if there is a URL, and if there is URL then check it is formatted correctly (www.myurl.com/xxx/yyy/zzz
If validation fails, then display alert box with any/all of the reasons for fail; then add a line of text under any/all of the text boxes that have failed validation with reason in red.
If validation is successful, then move on to the ajax call.*/
var msgSuccess = "<img src='green.png' width='26' height='26'>";
msgSuccess = msgSuccess + " " + "<span style='font-weight:bold;fo
px'>" + "Saved!" + "</span>";
<!---end .js file--->
<cffunction name="savetodb" access="remote" returnformat="json" returntype="string" output="false">
<cfargument name="name" type="string" required="yes">
<cfargument name="dist" type="string" required="yes">
<cfargument name="principal" type="string" required="yes">
<!---a bunch of db queries, success or fail--->
<cfset myResult="Success" />
<cfset myResult = "There was an error!" />