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;
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!
July 16th, 2007 at 3:27 pm
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>