Form validation on the fly

Hello,

I have a simple form with two text inputs. The user will place a value from 1 to 10 in each of the form entries. I want to create a validation before the "submit" button takes the user to the submission page. The validation is simply that the sum of the two entries cannot exceed 10. Essentially: (team1P1points + team1P2points) <= 10. In addition, is there a way to display this "sum" value automatically in another field that updates "on the fly", rather than only updating after the page is reloaded?

<form method="post" action="scores_submit.cfm">
<input name="team1P1points" type="text" value="#scores.P1POINTS#" size="5" />
<input name="team1P2points" type="text" value="#scores.P2POINTS#" size="5" />
<input type="submit" value="Update" />

Code (markup):

Thank you,

Nick

 

Is it possible to do with Coldfusion?

 

You would want to look into client-side validation if you want to validate things on the fly. One of the best frameworks out there would be jquery, which has validation functions that you can use.

 

OK - I got it to work, so this is an FYI for anyone having a similar issue:

Yes - this is done with client-side validation. I did the following:

<cfajaxproxy bind="javascript:add1({teamsetP1points@keyup},{teamsetP2points@keyup},{teamsetSUBpoints@keyup})" />
<script>
function add1(x,y,z) {
  document.getElementById("team1totalpoints").value = parseInt(x)+parseInt(y)+parseInt(z);
 }
</script>

Code (markup):

The above code is javascript to link to the form fields and perform th addition calculation. The parseInt code makes sure the form field entries are numbers so they can be added together. Then, the inputs look like this:

<input name="teamsetP1points" id="teamsetP1points" value="#scores_week01.P1points#" size="5" />
<input name="teamsetP2points" id="teamsetP2points" type="text" value="#scores_week01.P2points#" size="5" />
<input name="teamsetSUBpoints" id="teamsetSUBpoints" type="text" value="#scores_week01.SUBpoints#" size="5" />

Code (markup):

Finally - the form field that holds the sum:

<cfset teamsetRpoints = #scores_week01.P1points# + #scores_week01.P2points# + #scores_week01.SUBpoints#>
        <cfinput 	name="team1totalpoints" 
        			id="team1totalpoints" 
                    type="text" 
                    value="#teamsetRpoints#" 
                    size="5" 
                    validate="range" 
                    range="0,10" 
                    required="Yes"
        			message="Team 1 regular play points must be between 0 and 10!"/>

Code (markup):

The last piece does validation that the sum cannot exceed 10. In addition, the cool thing about this is that the sum field updates whenever one of the input fields changes.

Good luck!