Spry and Conditional Validation
I’d been wanting to play with Spry for ages now but couldn’t find a project to use it on, but a recent project involved quite long winded forms which require conditional validation based on previous responses and such like. I had originally used jQuery with a validation widget but when I brought in Spry to do a 2 selects related drop down things didn’t play well.
Fortunately for me, the new 1.4 Spry release brought with it Form Validation (or was it there around before 1.4, i could be wrong???). Out of the box, it’s not immediately obvious how to perform conditional validation but a post onto the Spry Forums revealed a direction to look in, making use of functions destroy() and reset() in the Spry library.
So here’s my setup; a page with a set of radio buttons say for example asking for a persons sex, male or female (this is a hypothetical situation!) and if a user chooses female then they are required to fill in additional details. The javascript I ended up writing looked like this;
<script language="javascript">
function sexchange(sex)
{
var mysex = sex.value;
if (mysex == 'm')
{
details.style.display = "none";
if (theName)
{
theName.reset();
theName.destroy();
}
if (theAge)
{
theAge.reset();
theAge.destroy();
}
}
else
{
details.style.display = "block";
theName = new Spry.Widget.ValidationTextField("theName", "none", {useCharacterMasking:true, validateOn:["change"]});
theAge = new Spry.Widget.ValidationTextField("theAge", "none", {useCharacterMasking:true, validateOn:["change"]});
}
}
</script>
What’s happened here is that if a user selects Female then it displays the div and creates a new spry validation object(s), if the user then changes back to Male then it resets and destroys the validation objects…very neat!
EDIT: Turns out the validation objects weren’t being reset/destroyed with my original code, the trick is not to var the validation objects!
No related posts.
Dear John
I would like to know how to go about adding conditional validation to this form below. Read though your work i can understand it but not enough to put it into my own code.
IF you could help me out i would be very greatful.
Best Regadds
jamie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryValidationCheckbox.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationCheckbox.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="usableforms.js"></script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="634" height="193" border="1">
<tr>
<td class="question">Employment details
<td width="365">
<input type="radio" name="employment" value="Self Employed" rel="selfEmployed" id="self_employed" /> <label for="self_employed">Self Employed</label><br />
<input type="radio" name="employment" value="Worker" rel="working" id="work_details" /> <label for="work_details">worker</label><br /> </td> </tr>
<tr rel="selfEmployed">
<td colspan="2"><span id="sprycheckbox1">
<label>
<input type="checkbox" name="sole" id="sole" />
Sole trader</label>
<span class="checkboxRequiredMsg">Please make a selection.</span> </span> <span id="sprycheckbox2">
<label>
<input type="checkbox" name="partnership" id="partnership" />
Partnership</label>
<span class="checkboxRequiredMsg">Please make a selection.</span> </span><span id="sprycheckbox3">
<label>
<input type="checkbox" name="company" id="company" />
Company</label>
<span class="checkboxRequiredMsg">Please make a selection.</span> </span></td>
</tr>
<tr rel="working">
<td>company</td>
<td><span id="sprytextfield1">
<input type="text" name="companname" id="companname" />
<span class="textfieldRequiredMsg">A value is required.</span> </span></td>
</tr>
<tr rel="working">
<td>Number of years</td>
<td><span id="sprytextfield2">
<input type="text" name="number" id="number" />
<span class="textfieldRequiredMsg">A value is required.</span> </span></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="submit" id="submit" value="Submit" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>
<script type="text/javascript">
<!–
var sprycheckbox1 = new Spry.Widget.ValidationCheckbox("sprycheckbox1");
var sprycheckbox2 = new Spry.Widget.ValidationCheckbox("sprycheckbox2", {validateOn:["blur"]});
var sprycheckbox3 = new Spry.Widget.ValidationCheckbox("sprycheckbox3", {validateOn:["blur"]});
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none");
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "none");
//–>
</script>
</body>
</html>
The Example code does not show in your blog entry… I don’t understand what you mean “the trick is not to var the validation objects”… I’ve been bashing my head against this problem for days now.
i’ve fixed the code display now too….
Thank you! Very helpful. Except that the reset() and destroy() functions do not seem to be working for me.