[SOLVED] Field validation and changing display properties...

[c_martini]

I have a somewhat complex form I am building for a site. I have broken this form down into a wizard based series of panels (divs) that display in succession as the user fills in the fields within them. This succession of panels is controlled by javascript. It shows and hides the panels on the fly as the user follows a series of proceed links through each step. The final step has the submit, completing the form.

What I would like to do is hide the proceed links by default for the required fields and only display the proceed link to the next step if the user has entered a value into that field. I am not sure the best way to go about this...

Any ideas?

[Rakuli]

You should be able to use onchange with a function that checks hides or displays the proceed like.

eg.

Code: Select all

<script type="text/javascript">

function toggleProceed(fields)
{

// Loop through the array of id's to check
  for (i = 0; i < fields.length; i++)
      if (document.getElementById(fields[i]).value == "")
       
      {   // if no value, the reset link to hidden and exit from function
          document.getElementById('proceed').style.visibility = 'hidden';
          return;
       }

   // If we made it here we can show the link
   document.getElementById('proceed').style.visibility = 'visible';

}
</script>
<form>
<input type="text" value="" id="num1" onchange="toggleProceed(new Array('num1', 'num2'))"/>
<input type="text" value="" id="num2" onchange="toggleProceed(new Array('num1', 'num2'))"/>

<a href="javascript:yourWizardFunction" style="visibility:hidden;" id="proceed" >Proceed</a>

</form>

This is a simple function to check that the value of each required input has been set. You could change it to just one 'id' at a time by removing the for loop.

It will hide the link again if the try changing a field back to nothing.

Hope that helps.

Cheers,

[c_martini]

Thanks Rakuli,

This works quite well. The only problem with it is that the link will not display until the user clicks an area outside the field. As some of the panels only contain 1 text field, its hard for the user to know what to do next once they have typed into the field without verbatim instruction.

Is there any way to have the proceed link display as soon as the user begins typing, rather than having to click an area outside the field first? Its hard for me to explain it really. I have seen similar behaviour on some serial key input fields in software install wizards. Once you have typed the correct serial number, the 'next' link becomes active. I realise these were not simply done with javascript and I am not looking for validation to that degree. I only wish to have the link become active once the user has typed anything into the field, without having to click any area outside it...

Does this make sense?

[Rakuli]

Easy Instead on onchange - use onkeyup as your event handler.

Cheers

[c_martini]

Originally Posted by Rakuli

Easy Instead on onchange - use onkeyup as your event handler.

Fab! Exactly what I need!

Many Thanks...

[c_martini]

Actually, I had another question about this...

Since I have several panels with a 'proceed' link in them, I know I cannot use the same id value more than once in the markup in the single file. How do I specify more than 1?

I have tried this:

Code: Select all

function toggleProceed(fields)
{

// Loop through the array of id's to check
  for (i = 0; i < fields.length; i++)
      if (document.getElementById(fields[i]).value == "")
       
      {   // if no value, the reset link to hidden and exit from function
          document.getElementById('proceed','proceed02','proceed03').style.visibility = 'hidden';
          return;
       }

   // If we made it here we can show the link
   document.getElementById('proceed','proceed02','proceed03').style.visibility = 'visible';

}

which does not seem to work. Would I have to use a separate if statement for each new id?

[Rakuli]

the way I had it in my first post was so you could add all the id's you need to the tag itself

onkeyup="toggleProceed(new Array('id1', 'id2','id3' etc...))"

It will loop through them all to make sure the values are set.

You wouldn't have to change the function at all.

[c_martini]

Yes that would work fine if I had all the fields in the form above one proceed link. However, because i'm dealing with several div panels within the form where each has its own field(s) and proceed link to another sucessive panel, specifying several id's in the first panel 'proceed' would not work as some of the id's it would be validating would be in panels which have not been accessed yet. It would simply leave the first proceed in a hidden state...

[Rakuli]

But only send the id's that would be required for that div.

Say the first div has 2 inputs that require data, for those two inputs only send those two id's.
Then in the next div only put the required id's on the inputs in that one.

You can put as many or as few as you like.

It doesn't check all the id's all the time, just the one's you want for that input.

Cheers,

[c_martini]

Sorry if I am not understanding you correctly. To show you what is happening, go to: www.minutebox.com/post_request

step 1 and step 3 have this function applied yet step 3 does not work. Just proceed past step 2 as it is not finished.

The source code will show that all the proceeds have the same id's which is one problem. I am aware of this bit.

[Rakuli]

okay, sorry I understand now. I thought you would have just had one link that swapped the divs. I didn't realise you had a different link for each.

You could change the function like this

Code: Select all

function toggleProceed(fields, proceedLink)
{

// Loop through the array of id's to check
  for (i = 0; i < fields.length; i++)
      if (document.getElementById(fields[i]).value == "")
       
      {   // if no value, the reset link to hidden and exit from function
          document.getElementById(proceedLink).style.visibility = 'hidden';
          return;
       }

   // If we made it here we can show the link
   document.getElementById(proceedLink).style.visibility = 'visible';

}

Now when you call the function use onkeyup="toggleProceed(new Array('id'), 'idofproceedlink')"

I hope that's what you mean.

Cheers

[c_martini]

You're a star! Works perfectly. Thanks for taking the time to help!

[Rakuli]

Cool Glad it works