Form validation with javascript in coldfusion

Question

I am trying to validate two fields. One is open time and the other one is close time. My validation should check if the close time has a value anything else than "00" my open time should have a value greater than "00" as well.

My question is, what am I doing wrong? I know I must have an error in my function.

This is the validation that I wrote so far:

<script type="text/javascript">

function hoursFunction(formObject, formField, fieldValue)
{  
  var closeHours = document.getElementById('closeHours#CountVar#');
  var openHours = document.getElementById('openHours#CountVar#');

  if(closeHours != "00" && openHours == "00")
  {
    sfm_show_error_msg('Enter a valid opening time');
  }
}

And this a sample of my form

<form id="hoursForm" action="physician_businessHours.cfm?docID=<cfoutput>#docid#</cfoutput>" method="post" onsubmit="hoursFunction();">
            <input type="hidden" name="postitnow" value="yes">


                    <table border="1">

                    <tr>
                        <th>Day</th><th>Open Time</th><th>Close Time</th>
                    </tr>


                    <cfloop from="1" to="7" index="CountVar">

                    <cfset dayFound= 0>
                    <tr>
                        <td><cfif CountVar eq 1>Mon<cfelseif CountVar eq 2>Tues<cfelseif CountVar eq 3>Wednes<cfelseif CountVar eq 4>Thurs<cfelseif CountVar eq 5>Fri<cfelseif CountVar eq 6>Satur<cfelseif CountVar eq 7>Sun</cfif>day</td>

                        <cfoutput>

                        <td>   
                        <select id="openHours#CountVar#" name="openHours#CountVar#">
                         <cfloop query="doctorHours">
                        <cfloop from="00" to="23" index="OpenHours">  
                        <option  value="#openHours#"<cfif TimeFormat(doctorHours.openTime,'HH') EQ OpenHours AND CountVar EQ doctorHours.day > selected="selected"</cfif>>#OpenHours#</option>
                        </cfloop>
                        </cfloop>
                        </select>
                         </td>

     <td>     
                        <select id="closeHours#CountVar#" name="closeHours#CountVar#">
                        <cfloop query="doctorHours">
                        <cfloop from="00" to="23" index="closeHours">  
                        <option value="#closeHours#"
                        <cfif TimeFormat(doctorHours.closeTime,'HH') EQ closeHours AND CountVar EQ doctorHours.day  > selected="selected"</cfif>>#closeHours#</option>
                        </cfloop>
                        </cfloop>
                        </select>
                        </td>
                         </tr>

      <input type="hidden" name="Validate" onValidate="hoursFunction" message="You must select an opening hour">

     <input type="submit" value="Update" id="Submit">
                    '

score 1 · Answer 1 · answered Apr 06 '12 at 18:47

1

You need to grab the values from your elements:

  var closeHours = document.getElementById('closeHours#CountVar#').value;
  var openHours = document.getElementById('openHours#CountVar#').value;

answered Apr 06 '12 at 18:47

Tuan

5,382
1
22
17

Nop, doesn't work. I need a for loop inside my function to be able to get all of those values out but for some reason my for loop it doesn't seem to work – Geo Apr 06 '12 at 19:47

score 1 · Answer 2 · answered Apr 06 '12 at 20:46

I see. You need to get the correct element ids:

for (var i = 0; i < 7; i++) {
    var closeHours = document.getElementById('closeHours' + i).value;
    var openHours = document.getElementById('openHours' + i).value;

    if (closeHours != "00" && openHours == "00") {
      sfm_show_error_msg('Enter a valid opening time');
    }
}

score 1 · Answer 3 · answered Apr 09 '12 at 16:37

Your CountVar starts from 1, not 0, so your for loop should be the same. Plus, to prevent form submission, your hoursFunction() should return false if the form does not validate. Also, your hoursFunction() expects 3 arguments, but you are not passing any to it - those arguments are not necessary in this case, so just remove them from function definition. Try the function below:

function hoursFunction() {
  for (var i = 1; i <= 7; i++) {
    var closeHours = document.getElementById('closeHours' + i).value;
    var openHours = document.getElementById('openHours' + i).value;
    if (closeHours != "00" && openHours == "00") {
      sfm_show_error_msg('Enter a valid opening time');
      return false;
    }
    return true;
  }
}

Thanks for your code and time, but your solution does not work. Check my answer on how I wrote the code and maybe you could help me with another issue that came up — Geo, Apr 10 '12 at 15:41

score 0 · Accepted Answer · answered Apr 10 '12 at 15:45

This is the code that I wrote and it works fine so far:

function hoursFunction()
{  

    var i = 0;
    var openHour;
    var closeHour;

    for(i=1;i<8;i++)
    {
     openHour = document.getElementById("openHours" + i).value;
     closeHour= document.getElementById("closeHours" + i).value;

    if(openHour > closeHour)
    {   
        document.getElementById('error').innerHTML= "Error at " + i;  
        return false; 
    }
    document.getElementById('error').innerHTML= "No Error occured";  
    return true;
    }
}

My issue now is that when I submit the form it seems that the form is doing a refresh and is deleting all of my data... Any thoughts on that?

Form validation with javascript in coldfusion

4 Answers4