CODEWITHSUNDEEP
javascriptjqueryformscoldfusion
user4409149
user4409149

Reputation:

Javascript/Coldfusion Form Loop Validation

I have a form that has a loop inside of the form. I am trying to create a dynamic Validation for the form but am failing because when the form submits it only validates the last loop. I have researched and attempted many different scenarios and, of course, have all failed! Any help or pointers would be greatly appreciated!

<cfform name="form" id="form" method="post">
    <cfset Peoplecount = 1>
        <cfloop index="Add" from="1" to="#session.checkout.quantity.pcount#" step="1">

<div class="clearfix">
        <cfinput type="text" name="firstname_#Add#" id="firstname_#Add#" placeholder="First"  validateat="onSubmit" validate="noblanks"  message="Please enter owner #Peoplecount#'s first name." value="#evaluate("session.checkout.info.firstname_#Add#")#">
        <cfinput type="text" name="middlename_#Add#" id="middlename_#Add#" placeholder="Middle" value="#evaluate("session.checkout.info.middlename_#Add#")#">
        <cfinput type="text" name="lastname_#Add#" id="lastname_#Add#" placeholder="Last" validateat="onSubmit" validate="noblanks" message="Please enter owner #Peoplecount#'s last name." value="#evaluate("session.checkout.info.lastname_#Add#")#">
    </div>

    <script type="text/javascript">
      function Validate<cfoutput>#Add#</cfoutput>() {
        $('#firstname_<cfoutput>#Add#</cfoutput>').prop('required',true);
        $('#middlename_<cfoutput>#Add#</cfoutput>').prop('required',false);
        $('#lastname_<cfoutput>#Add#</cfoutput>').prop('required',true);
     }
    </script>

    <cfinput type="submit" name="Submit" value="Submit" onClick="Validate<cfoutput>#Add#</cfoutput>();">

Also what I find confusing is if the loop is 1 everything works properly but if the loop is any number higher than 1 then it only validates the last loop
When its like this: 

function Validate() {

<cfinput type="submit" name="Submit" value="Submit" onClick="Validate();">

Loop is at the end like this:

<cfif Add NEQ session.checkout.quantity.pcount>

<div class="labelspace">
    <label for="andor_<cfoutput>#Add#</cfoutput>"><strong>Please indicate if "or" or "and" is to be shown on title when issued.</strong></label>
    <cfinclude template="../../../ddl/andor.cfm" >
</div><br>

    <cfelse>
        <cfinput type="submit" name="Submit" value="Submit" onClick="Validate();">
    </cfif>

             <cfset Peoplecount = PeopleCount + 1>


     </cfloop>

Upvotes: 1

Views: 175

Answers (1)

Chris Tierney
Chris Tierney

Reputation: 1549

Without seeing where you end your cfloop, I'm just assuming here. But let's say the cfloop is at the very end of your code. You'll end up with multiple submit button, where each one will only "validate" each 3 inputs per submit button.

Here's my suggestions:

  1. Don't reinvent the wheel. Look at jQuery.validate plugin. Also, get rid of <cfinput> and just use <input>
  2. Instead of adding the required property via jQuery, just add it to your cfinput as required="required"
  3. Don't use evaluate(). Instead do this value="#session.checkout.info["lastname_" & Add]#"

Upvotes: 1

Related Questions