Validation Widgets DemoBack to Demos Return to Validation Widgets Demo


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Validation Widgets Demo</title>
<link href="../css/screen.css" rel="stylesheet" type="text/css" media="all" />
<link href="../../widgets/textfieldvalidation/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="../../widgets/selectvalidation/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
<link href="../../widgets/textareavalidation/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />
<link href="../../widgets/checkboxvalidation/SpryValidationCheckbox.css" rel="stylesheet" type="text/css" />
<link href="validation.css" rel="stylesheet" type="text/css" media="all" />

<script type="text/javascript" src="../../widgets/textfieldvalidation/SpryValidationTextField.js"></script>
<script type="text/javascript" src="../../widgets/selectvalidation/SpryValidationSelect.js"></script>
<script type="text/javascript" src="../../widgets/textareavalidation/SpryValidationTextarea.js"></script>
<script type="text/javascript" src="../../widgets/checkboxvalidation/SpryValidationCheckbox.js"></script>

</head>

<body>
<noscript><h1>This page requires JavaScript. Please enable JavaScript in your browser and reload this page.</h1></noscript>
<div id="wrap">
  <h1>Validation Widgets Demo
  	<span class="return">
  		<a href="../index.html">Back to Demos</a></span><span class="source">
		<a href="source.html">View Source </a>
	</span>
  </h1>
  
 <div id="CentralColumn">
	<div id="articles">
		<form id="form1" name="form1" method="post">
		<div id="formregion">
			
		<div id="theTitle">
			<div class="formLabel">Title:</div>
			<input name="movieName" type="text" id="theMovieTitle" value="Conquistador" />
			<img src="images/ok.gif" title="Valid" alt="Valid" class="validMsg" border="0"/>
			<span class="textfieldRequiredMsg">Please enter a title.</span>
		</div>

		<div id="theRating">
			<div class="formLabel">Rating:</div>
			<select name="Rating" id="movieRating">
				<option value="">Please select</option>
				<option value="5">*****</option>
				<option value="4">****</option>
				<option value="3">***</option>
				<option value="2">**</option>
				<option value="1">*</option>
			</select>
			<img src="images/ok.gif" title="Valid" alt="Valid" class="validMsg" border="0"/>
			<span class="selectRequiredMsg">Please select a rating.</span>
		</div>

		<div id="theDate">
			<div class="formLabel">Date:</div>
			<input name="movieDate" type="text" id="movieYear" value="" />
			<img src="images/ok.gif" title="Valid" alt="Valid" class="validMsg" border="0"/>
			<span class="textfieldRequiredMsg">Please enter a date.</span>
			<span class="textfieldInvalidFormatMsg">Please enter a valid date (mm/dd/yyyy).</span>
		</div>
    
		<div id="theDuration">
			<div class="formLabel">Duration (minutes):</div>
			<input name="movieDuration" type="text" id="movieTime" value="1h 35min" />
			<img src="images/ok.gif" title="Valid" alt="Valid" class="validMsg" border="0"/>
			<span class="textfieldRequiredMsg">Please enter a duration.</span>
			<span class="textfieldInvalidFormatMsg">Please enter a positive number.</span>
		</div>
		
		<div id="theStudio">
			<div class="formLabel">Studio:</div>
			<select name="movieStudio" id="movieStudio">
				<option value="" selected>Please select</option>
				<option value="13Foxes">Thirteen Foxes</option>
				<option value="StudioMartin">Studio Martin</option>
				<option value="Kristal">Kristal</option>
				<option value="NorthEastStars">NorthEast Stars</option>
				<option value="Multiplex">Multiplex</option>
				<option value="ACME">ACME</option>
			</select>
			<img src="images/ok.gif" title="Valid" alt="Valid" class="validMsg" border="0"/>
			<span class="selectRequiredMsg">Please select a studio.</span>
		 </div>

		<div id="theDescription">
		 	<div class="formLabel">Description:</div>
			<table border="0">
			<tr>
				<td valign="top" rowspan="2">
					<textarea name="movieDescription" id="movieDescription" cols="45" rows="5">The story of a historian accompanying Cortez in his quest in the New World.</textarea>
				</td>
				<td valign="top" width="325">				
					<img src="images/ok.gif" title="Valid" alt="Valid" class="validMsg" border="0"/>
					<span class="textareaRequiredMsg">Please enter a description.</span>
					<span class="textareaMinCharsMsg">Please enter at least 20 characters.</span>
				</td>
			</tr>
			<tr>
				<td valign="bottom"><span id="Countvalidta1"> </span> / 180</td>
			</tr>
			</table>
		</div>

		<div id="checkboxes">
			<div class="formLabel">Genre:</div>
			<div id="validcheckbox">
				<label for="checkbox_1">Crime</label>
				<div class="input_container">
						<input type="checkbox" name="movieGenre" id="checkbox_1" value="1"/>
				</div>
			</div>	
			<div id="validcheckbox">
				<label for="checkbox_2">Mystery</label>
				<div class="input_container">
						<input type="checkbox" name="movieGenre" id="checkbox_2" value="2"/>
				</div>
			</div>
			<div id="validcheckbox">
				<label for="checkbox_3">Drama</label>
				<div class="input_container">
						<input type="checkbox" name="movieGenre" id="checkbox_3" value="3"/>
				</div>
			</div>
			<div id="validcheckbox">
				<label for="checkbox_4">Romance</label>
				<div class="input_container">
						<input type="checkbox" name="movieGenre" id="checkbox_4" value="4"/>
				</div>
			</div>
			
			<div id="validcheckbox">
				<label for="checkbox_5">Comedy</label>
				<div class="input_container">
						<input type="checkbox" name="movieGenre" id="checkbox_5" value="5"/>
				</div>
			</div>
			<div id="errors">
				<img src="images/ok.gif" title="Valid" alt="Valid" class="validMsg" border="0"/>
				<span class="checkboxRequiredMsg">Please select at least a genre.</span>
				<span class="checkboxMaxSelectionsMsg">Only maximum 3 genres can be selected.</span>
			</div>
			<br style="clear:both"/>
		</div>
			
		<div class="buttons">
			<input type="submit" name="Submit" id="submit" value="Submit"/>
			<input type="reset" name="Reset" id="reset" value="Reset" />
		</div>
      </form>
    </div>
  </div>
  <div class="ClearAll"> </div>
</div>
</form>

<script type="text/javascript">
<!--
	var theTitle = new Spry.Widget.ValidationTextField("theTitle", "none", {useCharacterMasking:true, validateOn:["change"]});
	var theDate = new Spry.Widget.ValidationTextField("theDate", "date", {useCharacterMasking:true, format:"mm/dd/yyyy", hint:"mm/dd/yyyy", validateOn:["change"]});
	var theDuration = new Spry.Widget.ValidationTextField("theDuration", "integer", {useCharacterMasking:true, validateOn:["change"], allowNegative:false});
	var theRating = new Spry.Widget.ValidationSelect("theRating", {validateOn:["change"]});
	var theStudio = new Spry.Widget.ValidationSelect("theStudio", {validateOn:["change"]});
	var theDescription = new Spry.Widget.ValidationTextarea("theDescription", {useCharacterMasking:true, minChars:20, maxChars:180, counterType:"chars_count", counterId:"Countvalidta1", validateOn:["change"]});
	var checkboxes = new Spry.Widget.ValidationCheckbox("checkboxes", {validateOn:["change"], maxSelections:3});
//-->
</script>
</body>
</html>