SpryValidationTextField Demo

by Annie Lagang

HTML

<!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=iso-8859-1" />
<title>Spry Textfield Validation Widget</title>
<link href="http://adobe.github.com/Spry/css/samples.css" rel="stylesheet" type="text/css" />
<link href="http://adobe.github.com/Spry/widgets/textfieldvalidation/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<script src="http://adobe.github.com/Spry/widgets/textfieldvalidation/SpryValidationTextField.js" type="text/javascript"></script>
<link href="http://adobe.github.com/Spry/widgets/selectvalidation/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
<script src="http://adobe.github.com/Spry/widgets/selectvalidation/SpryValidationSelect.js" type="text/javascript"></script>

<style type="text/css">
.tablecontainer{
	width:540px;
}
.tablecell input{
	width:150px;
}
.tablecell{
	width:33%;
	float:left;
	height:60px;
}
.submitContainer{
	clear:both;
}
.container{
	clear:both;
}
label{
	display:block;
	margin-bottom:7px;
}
#form2 label{
	display:inline;
}
#form2 input{
	margin-top:7px;
}
td{
	vertical-align:top;
	padding:2px;
}
#min_max_char.textfieldRequiredState .textfieldRequiredMsg,
#min_max_char.textfieldMaxCharsState .textfieldMaxCharsMsg ,
#min_max_char.textfieldMinCharsState .textfieldMinCharsMsg{
	display:inline;
	color:#0033CC;
	border:1px blue solid;
}
.first_textfield{
	padding-left:4px;

}
.second_textfield{
	padding-left:2px;
	
}
.third_textfield3{
	padding-left:0px;
}
</style>

</head>
<body>
<h3>Spry Textfield Validation Samples</h3>
<p>This page gives examples of the textfield widget capabilities.</p>
<hr />
<!--

	First Example - Different validation moments - Change, Blur, Submit

-->

<p>Here we have an example of a textfield widget that validates if the entered value is numeric. There are three validation techniques:...

JavaScript

$(function() {
    $('#submit1').click(function(e) {
        //won't validate if controls are not shown
	    $('#number1').hide();
        
        //won't validate either if the controls are disabled
        $('#text2').attr('disabled','disabled');
        
        // removes text content
        $('#text3').val('');
    });
    
    $('#validsel1').css('display','none');
    // also doesn't validate is the controls are hidden
    $('#validsel2').css('visibility','hidden');
    var link = $('#submit2');
    link.bind("click", function(e) {
     	$('#validsel1').show()
        $('#validsel2').css('visibility','visible');
        
        // changes value
        $('#validsel3').val(1);
        //$('select[name=myList] option[value=1]').attr('selected', 'selected');
        
        $('#validsel3 option[value="Alabama"]').attr('selected', 'selected');
    });
});