How to validate form fields in a facebox?

Question

I need to validate my form fields displayed in facebox.

The problem is that i am unable to get the values of the fields by using javascript.

for ex: document.form.field_name.value doesnt return its value.

Code sample :

<script type="text/javascript">
function validate()
{
  if (document.form1.field.value=='')
{
   alert ("Field cannot be left blank");
}
}

</script>


<form name="form1" onsubmit="return validate()">
<input type="text" name="field" /> 

</form>

The following link contains some useful, relevant information: http://www.quirksmode.org/js/forms.html — Don, Jun 28 '12 at 21:19
the problem is that javascript is not working properly in a jquery popup plugin called facebox — Ashish Saxena, Jun 28 '12 at 21:22

score 0 · Answer 1 · answered Sep 14 '12 at 13:24

A way to do this would be to pass the value directly from the form to the validation code.

<form name="form" id="form" onsubmit="return validate(this.field.value)">
<input type="text" id="field" /> 
</form>

Or you could even use a text box without the form using:

<input type="text" id="field" 
onkeydown="if (event.keyCode == 13) return validate(this.value)" />

Update the script to allow for the new value parameter:

<script type="text/javascript">
 function validate(val) {
   if (val.length < 1)
   {
      alert ("field cannot be left blank");
      return false; //to stop the default action of submitting the form
   } else {
      alert ("Value: "+val);
      return true; //allow to submit the page
   }
 }

</script>

This is actually a pretty easy and simple validation, but don't forget to set the return action based on whether you want the system to proceed with the submit or not.

I'm not sure where your pulling your page from whether from a remote html address or a locally stored div. So I'm not sure why your solution of pulling the value from the DOM does not work. I generally have no problems using jquery to get and set the values from the different fields in facebox windows.

NOTE: you have to be careful where you place your scripts. It depends on your application but sometimes you may want to place the script in the root document instead of the facebox page because if you load a remote facebox div you have a scope change and may need to refer to parent.document to access parent fields when the script is embedded in the remote facebox div.

score 0 · Answer 2 · answered Oct 06 '12 at 03:36

Facebox copies the chunk of DOM displayed, effectively creating elements with duplicate ids. This is not allowed by HTML standard. Your javascript goes bonkers looking for a single element uniquely identified by its id, yet it finds 2 of them...

This is a huge bug in Facebox. Any code in a facebox should not have ids. All your bindings should be renewed when the facebox is revealed.

How to validate form fields in a facebox?

2 Answers2