Seahorse - JavaScript library of form validation and form serialization

4. Behaviors

The behaviors allow real-time validation of form fields by events of loss of focus and a key pressed. The behaviors are assigned by different functions that receive, as parameter, the id or reference of the field, the options for validation and response options.

The validation options determines how the field is validated and are similar to the parameters received by the validation functions. The response options determines the actions to be undertaken when it detects that a field has a valid or invalid value.

4.1 Texts

To define inputs that accept textual data, there are the methods text(), which by itself does not impose any restriction, alphanumeric(), which accepts only letters and numbers (does not allow symbols or punctuation), alphabetical(), which only accepts letters, and numeric(), which only accepts numbers.

As validation options, all the functions accept the parameters: notEmpty, minLength, maxLength, asciiCharacters, requiredCharacters, forbiddenCharacters, allowedCharacters and aditionalValidation.

notEmpty allows to indicate whether a field can be left blank or not. The default is false (fields can be left blank).

View source code

<html>

<head>
<title>Seahorse example</title>

<style type="text/css">
	.ok { background-color:#f0fff0; }
	.error { background-color:#fff0f0; }
</style>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.text("textNe1", {}, {"okClass": "ok", "errorClass": "error"});
		document.getElementById("textNe1").seahorse.verify();

		Seahorse.text("textNe2", {"notEmpty": false}, {"okClass": "ok", "errorClass": "error"});
		document.getElementById("textNe2").seahorse.verify();

		Seahorse.text("textNe3", {"notEmpty": true}, {"okClass": "ok", "errorClass": "error"});
		document.getElementById("textNe3").seahorse.verify();
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table>
		<tr>
			<td>text()</td>
			<td></td>
			<td><input type="text" id="textNe1" value=""/></td>
		</tr>
		<tr>
			<td>text()</td>
			<td>notEmpty = true</td>
			<td><input type="text" id="textNe2" value=""/></td>
		</tr>
		<tr>
			<td>text()</td>
			<td>notEmpty = false</td>
			<td><input type="text" id="textNe3" value=""/></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

minLength and maxLength let you set the minimum and maximum number of characters that can have an input.

View source code

<html>

<head>
<title>Seahorse example</title>

<style type="text/css">
	.ok { background-color:#f0fff0; }
	.error { background-color:#fff0f0; }
</style>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.text("textMl1", {"notEmpty": true, "minLength" : 3},
						{"okClass": "ok", "errorClass": "error"});
		document.getElementById("textMl1").seahorse.verify();

		Seahorse.text("textMl2", {"maxLength" : 6}, {"okClass": "ok", "errorClass": "error"});
		document.getElementById("textMl2").seahorse.verify();
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo">
		<tr>
			<td>text()</td>
			<td>notEmpty = true, minLength = 3</td>
			<td><input type="text" id="textMl1" value=""/></td>
		</tr>
		<tr>
			<td>text()</td>
			<td>maxLengt = 6</td>
			<td><input type="text" id="textMl2" value=""/></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

asciiCharacters allows to indicate whether the entry will only allow ASCII characters, rather than allow all Unicode characters. By default, all Unicode characters are allowed.

View source code

<html>

<head>
<title>Seahorse example</title>

<style type="text/css">
	.ok { background-color:#f0fff0; }
	.error { background-color:#fff0f0; }
</style>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.text("textAc1", {}, {"okClass": "ok", "errorClass": "error"});
		document.getElementById("textAc1").seahorse.verify();

		Seahorse.text("textAc2", {"asciiCharacters": false}, {"okClass": "ok", "errorClass": "error"});
		document.getElementById("textAc2").seahorse.verify();

		Seahorse.text("textAc3", {"asciiCharacters": true}, {"okClass": "ok", "errorClass": "error"});
		document.getElementById("textAc3").seahorse.verify();
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo codigo">
		<tr>
			<td>text()</td>
			<td></td>
			<td><input type="text" id="textAc1" value=""/></td>
		</tr>
		<tr>
			<td>text()</td>
			<td>asciiCharacters = false</td>
			<td><input type="text" id="textAc2" value=""/></td>
		</tr>
		<tr>
			<td>text()</td>
			<td>asciiCharacters = true</td>
			<td><input type="text" id="textAc3" value=""/></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

requiredCharacters lets you specify the characters that has to be entered for the field be considered valid.

View source code

<html>

<head>
<title>Seahorse example</title>

<style type="text/css">
	.ok { background-color:#f0fff0; }
	.error { background-color:#fff0f0; }
</style>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.text("textRc1", {"requiredCharacters": "_"},
						{"okClass": "ok", "errorClass": "error"});
		document.getElementById("textRc1").seahorse.verify();

		Seahorse.alphanumeric("textRc2", {"requiredCharacters": "a1"},
						{"okClass": "ok", "errorClass": "error"});
		document.getElementById("textRc2").seahorse.verify();

		Seahorse.alphabetical("textRc3", {"requiredCharacters": ["a".charCodeAt(0), "b".charCodeAt(0)]},
						{"okClass": "ok", "errorClass": "error"});
		document.getElementById("textRc3").seahorse.verify();
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo codigo">
		<tr>
			<td>text()</td>
			<td>requiredCharacters = "_"</td>
			<td><input type="text" id="textRc1" value=""/></td>
		</tr>
		<tr>
			<td>alphanumeric()</td>
			<td>requiredCharacters = "a1"</td>
			<td><input type="text" id="textRc2" value=""/></td>
		</tr>
		<tr>
			<td>alphabetical()</td>
			<td>requiredCharacters = ["a", "b"]</td>
			<td><input type="text" id="textRc3" value=""/></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

forbiddenCharacters allows to indicate the characters that must not be entered in order that the entry be considered to be valid.

View source code

<html>

<head>
<title>Seahorse example</title>

<style type="text/css">
	.ok { background-color:#f0fff0; }
	.error { background-color:#fff0f0; }
</style>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.text("textFc1", {"forbiddenCharacters": "_"},
					{"okClass": "ok", "errorClass": "error"});
		document.getElementById("textFc1").seahorse.verify();

		Seahorse.alphanumeric("textFc2", {"forbiddenCharacters": "a1"},
					{"okClass": "ok", "errorClass": "error"});
		document.getElementById("textFc2").seahorse.verify();

		Seahorse.alphabetical("textFc3", {"forbiddenCharacters": ["a".charCodeAt(0), "b".charCodeAt(0)]},
					{"okClass": "ok", "errorClass": "error"});
		document.getElementById("textFc3").seahorse.verify();
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo codigo">
		<tr>
			<td>text()</td>
			<td>forbiddenCharacters = "_"</td>
			<td><input type="text" id="textFc1" value=""/></td>
		</tr>
		<tr>
			<td>alphanumeric()</td>
			<td>forbiddenCharacters = "a1"</td>
			<td><input type="text" id="textFc2" value=""/></td>
		</tr>
		<tr>
			<td>alphabetical()</td>
			<td>forbiddenCharacters = ["a", "b"]</td>
			<td><input type="text" id="textFc3" value=""/></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

allowedCharacters allows to indicate a group of characters that an entry can have and nonetheless be considered valid. This parameter allows, for example, that an entry of type alphabetical can accepts some signs of punctuation.

View source code

<html>

<head>
<title>Seahorse example</title>

<style type="text/css">
	.ok { background-color:#f0fff0; }
	.error { background-color:#fff0f0; }
</style>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.alphanumeric("textAllc1", {"allowedCharacters": " "},
					{"okClass": "ok", "errorClass": "error"});
		document.getElementById("textAllc1").seahorse.verify();

		Seahorse.alphabetical("textAllc2", {"allowedCharacters": "123"},
					{"okClass": "ok", "errorClass": "error"});
		document.getElementById("textAllc2").seahorse.verify();

		Seahorse.numeric("textAllc3", {"allowedCharacters": ["a".charCodeAt(0), "b".charCodeAt(0)]},
					{"okClass": "ok", "errorClass": "error"});
		document.getElementById("textAllc3").seahorse.verify();
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo codigo">
		<tr>
			<td>alphanumeric()</td>
			<td>allowedCharacters = " "</td>
			<td><input type="text" id="textAllc1" value=""/></td>
		</tr>
		<tr>
			<td>alphabetical()</td>
			<td>allowedCharacters = "123"</td>
			<td><input type="text" id="textAllc2" value=""/></td>
		</tr>
		<tr>
			<td>numeric()</td>
			<td>allowedCharacters = ["a", "b"]</td>
			<td><input type="text" id="textAllc3" value=""/></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

aditionalValidation allows specify a function to perform an additional verification to determine if the input is valid or not.

View source code

<html>

<head>
<title>Seahorse example</title>

<style type="text/css">
	.ok { background-color:#f0fff0; }
	.error { background-color:#fff0f0; }
</style>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.text("textAv1", {"aditionalValidation": oddLength},
			{"okClass": "ok", "errorClass": "error"});
		document.getElementById("textAv1").seahorse.verify();

		Seahorse.text("textAv2", {"aditionalValidation": evenLength},
			{"okClass": "ok", "errorClass": "error"});
		document.getElementById("textAv2").seahorse.verify();
		}

	function oddLength(element)
		{ return element.value.length%2 == 1;}

	function evenLength(element)
		{ return element.value.length%2 == 0;}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo codigo">
		<tr>
			<td>text()</td>
			<td>aditionalValidation = oddLength()</td>
			<td><input type="text" id="textAv1" value=""/></td>
		</tr>
		<tr>
			<td>text()</td>
			<td>aditionalValidation = evenLenght()</td>
			<td><input type="text" id="textAv2" value=""/></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

4.2 Numbers

To set numeric inputs you should use the functions number(), for numbers of all types, and integer(), for integers.

As validation options, the functions accept the parameters: groupingCharacter, decimalCharacter, minValue, maxValue, notEmpty and aditionalValidation.

decimalCharacter and groupingCharacter are used to define which characters are used, respectively, as decimal separator and grouping character (or thousands separator).

View source code

<html>

<head>
<title>Seahorse example</title>

<style type="text/css">
	.ok { background-color:#f0fff0; }
	.error { background-color:#fff0f0; }
</style>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.number( "number21", {"decimalCharacter": '.', "groupingCharacter" : ','},
					{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("number21").seahorse.verify();

		Seahorse.number( "number22", {"decimalCharacter": ',', "groupingCharacter" : '.'},
					{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("number22").seahorse.verify();

		Seahorse.number( "number23", {"decimalCharacter": '.', "groupingCharacter" : ' '},
					{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("number23").seahorse.verify();
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo">
		<tr>
			<td>number()</td>
			<td>decimalCharacter = '.', groupingCharacter = ','</td>
			<td><input type="text" id="number21" value=""/></td>
		</tr>
		<tr>
			<td>number()</td>
			<td>decimalCharacter = ',', groupingCharacter = '.'</td>
			<td><input type="text" id="number22" value=""/></td>
		</tr>
		<tr>
			<td>number()</td>
			<td>decimalCharacter = '.', groupingCharacter = ' '</td>
			<td><input type="text" id="number23" value=""/></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

minValue and maxValue defines the minimum and maximum values that an input can have

View source code

<html>

<head>
<title>Seahorse example</title>

<style type="text/css">
	.ok { background-color:#f0fff0; }
	.error { background-color:#fff0f0; }
</style>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.number( "numberMv1",
			{"decimalCharacter": '.', "groupingCharacter" : ',',
			"minValue" : -10.5, "maxValue" : 10.5},
			{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("numberMv1").seahorse.verify();

		Seahorse.number( "numberMv2",
			{"decimalCharacter": '.', "groupingCharacter" : ',',
			"minValue" : 0, "maxValue" : 10.5},
			{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("numberMv2").seahorse.verify();

		Seahorse.number( "numberMv3",
			{"decimalCharacter": '.', "groupingCharacter" : ',',
			"minValue" : -10.5, "maxValue" : 0},
			{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("numberMv3").seahorse.verify();

		Seahorse.integer( "numberMv4",
			{"groupingCharacter" : ',', "minValue" : -10, "maxValue" : 10},
			{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("numberMv4").seahorse.verify();

		Seahorse.integer( "numberMv5",
			{"groupingCharacter" : ',', "minValue" : 0, "maxValue" : 10},
			{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("numberMv5").seahorse.verify();

		Seahorse.integer( "numberMv6",
			{"groupingCharacter" : ',', "minValue" : -10, "maxValue" : 0},
			{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("numberMv6").seahorse.verify();
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo">
		<tr>
			<td>number()</td>
			<td>
				decimalCharacter = '.', groupingCharacter = ','<br/>
				minValue = -10.5, maxValue = 10.5
			</td>
			<td><input type="text" id="numberMv1" value=""/></td>
		</tr>
		<tr>
			<td>number()</td>
			<td>
				decimalCharacter = '.', groupingCharacter = ','<br/>
				minValue = 0, maxValue = 10.5
			</td>
			<td><input type="text" id="numberMv2" value=""/></td>
		</tr>
		<tr>
			<td>number()</td>
			<td>
				decimalCharacter = '.', groupingCharacter = ','<br/>
				minValue = -10.5, maxValue = 0
			</td>
			<td><input type="text" id="numberMv3" value=""/></td>
		</tr>
		<tr>
			<td>integer()</td>
			<td>
				groupingCharacter = ','<br/>
				minValue = -10, maxValue = 10
			</td>
			<td><input type="text" id="numberMv4" value=""/></td>
		</tr>
		<tr>
			<td>integer()</td>
			<td>
				groupingCharacter = ','<br/>
				minValue = 0, maxValue = 10
			</td>
			<td><input type="text" id="numberMv5" value=""/></td>
		</tr>
		<tr>
			<td>integer()</td>
			<td>
				groupingCharacter = ','<br/>
				minValue = -10, maxValue = 0
			</td>
			<td><input type="text" id="numberMv6" value=""/></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

notEmpty and aditionalValidation work in the same way as in the case of texts.

4.3 Dates and hours

To set date and time inputs you should use the functions date(), for dates, and time(), for hours.

As validation options, the functions accept the parameters: format, autofill, minValue, maxValue, notEmpty and aditionalValidation.

format defines the format of the date or time. The format for dates is constituted by the combination of 'd' or 'dd' (day one or two digits), 'm' or 'mm' (month of one or two digits) and 'y' or 'yyyy' (years two to four digits). The format for times s constituted by the combination of 's' or 'ss' (seconds of one or two digits), 'm' or 'mm' (minutes of one or two digits) and 'h' or 'hh' (hours of one or two digits).

View source code

<html>

<head>
<title>Seahorse example</title>

<style type="text/css">
	.ok { background-color:#f0fff0; }
	.error { background-color:#fff0f0; }
</style>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.date( "date21", {"format" : 'mm/dd/yyyy'}, {"okClass": "ok", "errorClass": "error"} );
		document.getElementById("date21").seahorse.verify();

		Seahorse.date( "date22", {"format" : 'dd/mm/yyyy'}, {"okClass": "ok", "errorClass": "error"} );
		document.getElementById("date22").seahorse.verify();

		Seahorse.date( "date23", {"format" : 'yyyy-mm-dd'}, {"okClass": "ok", "errorClass": "error"} );
		document.getElementById("date23").seahorse.verify();

		Seahorse.time( "time21", {"format" : 'hh:mm:ss'}, {"okClass": "ok", "errorClass": "error"} );
		document.getElementById("time21").seahorse.verify();

		Seahorse.time( "time22", {"format" : 'hh-mm-ss'}, {"okClass": "ok", "errorClass": "error"} );
		document.getElementById("time22").seahorse.verify();
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo">
		<tr>
			<td>date()</td>
			<td>format = mm/dd/yyyy</td>
			<td><input type="text" id="date21" value=""/></td>
		</tr>
		<tr>
			<td>date()</td>
			<td>format = dd/mm/yyyy</td>
			<td><input type="text" id="date22" value=""/></td>
		</tr>
		<tr>
			<td>date()</td>
			<td>format = yyyy-mm-dd</td>
			<td><input type="text" id="date23" value=""/></td>
		</tr>
		<tr>
			<td>time()</td>
			<td>format = hh:mm:ss</td>
			<td><input type="text" id="time21" value=""/></td>
		</tr>
		<tr>
			<td>time()</td>
			<td>format = hh-mm-ss</td>
			<td><input type="text" id="time22" value=""/></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

autofill indicate if the incompleted fields of a date or a time must be completed with the actual date or time.

View source code

<html>

<head>
<title>Seahorse example</title>

<style type="text/css">
	.ok { background-color:#f0fff0; }
	.error { background-color:#fff0f0; }
</style>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.date( "date31", {"format" : 'yyyy-mm-dd'},
			{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("date31").seahorse.verify();

		Seahorse.date( "date32", {"format" : 'yyyy-mm-dd', 'autofill': true},
			{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("date32").seahorse.verify();

		Seahorse.date( "date33", {"format" : 'yyyy-mm-dd', 'autofill': false},
			{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("date33").seahorse.verify();

		Seahorse.time( "time31", {"format" : 'hh:mm:ss'},
			{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("time31").seahorse.verify();

		Seahorse.time( "time32", {"format" : 'hh:mm:ss', 'autofill': true},
			{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("time32").seahorse.verify();

		Seahorse.time( "time33", {"format" : 'hh:mm:ss', 'autofill': false},
{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("time33").seahorse.verify();
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo">
		<tr>
			<td>date()</td>
			<td>format = yyyy-mm-dd</td>
			<td><input type="text" id="date31" value=""/></td>
		</tr>
		<tr>
			<td>date()</td>
			<td>format = yyyy-mm-dd, autofill = true</td>
			<td><input type="text" id="date32" value=""/></td>
		</tr>
		<tr>
			<td>date()</td>
			<td>format = yyyy-mm-dd, autofill = false</td>
			<td><input type="text" id="date33" value=""/></td>
		</tr>
		<tr>
			<td>time()</td>
			<td>format = hh:mm:ss</td>
			<td><input type="text" id="time31" value=""/></td>
		</tr>
		<tr>
			<td>time()</td>
			<td>format = hh:mm:ss, autofill = true</td>
			<td><input type="text" id="time32" value=""/></td>
		</tr>
		<tr>
			<td>time()</td>
			<td>format = hh:mm:ss, autofill = false</td>
			<td><input type="text" id="time33" value=""/></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

minValue and maxValue defines the minimum and maximum values that can have an input.

View source code

<html>

<head>
<title>Seahorse example</title>

<style type="text/css">
	.ok { background-color:#f0fff0; }
	.error { background-color:#fff0f0; }
</style>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.date( "date41", {"format" : 'dd/mm/yyyy',
			"minValue" : "01/01/1996", "maxValue" : "07/07/2010"},
			{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("date41").seahorse.verify();

		Seahorse.date( "date42", {"format" : 'dd/mm/yyyy',
			"minValue" : "01/01/2010", "maxValue" : "31/12/2010"},
			{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("date42").seahorse.verify();

		Seahorse.time( "time41", {"format" : 'hh:mm:ss',
			"minValue" : "00:00:00", "maxValue" : "12:00:00"},
			{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("time41").seahorse.verify();

		Seahorse.time( "time42", {"format" : 'hh:mm:ss',
			"minValue" : "12:34:56", "maxValue" : "23:59:59"},
			{"okClass": "ok", "errorClass": "error"} );
		document.getElementById("time42").seahorse.verify();
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo">
		<tr>
			<td>date()</td>
			<td>format = dd/mm/yyyy, minValue = "01/01/1996", maxValue = "07/07/2010"</td>
			<td><input type="text" id="date41" value=""/></td>
		</tr>
		<tr>
			<td>date()</td>
			<td>format = dd/mm/yyyy, minValue = "01/01/2010", maxValue = "31/12/2010"</td>
			<td><input type="text" id="date42" value=""/></td>
		</tr>
		<tr>
			<td>time()</td>
			<td>format = hh:mm:ss, minValue = "00:00:00", maxValue = "12:00:00"</td>
			<td><input type="text" id="time41" value=""/></td>
		</tr>
		<tr>
			<td>time()</td>
			<td>format = hh:mm:ss, minValue = "12:34:56", maxValue = "23:59:59"</td>
			<td><input type="text" id="time42" value=""/></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

notEmpty and aditionalValidation work in the same way as in the case of texts.

4.4 Internet's addresses

The functions ipAddress(), email(), http() and ftp() allow, respectively, define fields for IP addresses, e-mail and HTTP or FTP address.

As validation options, the functions accept only notEmpty and aditionalValidation parameters, except ipAddress() that also accept the version parameter, that can take the values 4 or 6.

View source code

<html>

<head>
<title>Seahorse example</title>

<style type="text/css">
	.ok { background-color:#f0fff0; }
	.error { background-color:#fff0f0; }
</style>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.ipAddress( "ipv42", {"version" : 4}, {"okClass": "ok", "errorClass": "error"} );
		document.getElementById("ipv42").seahorse.verify();

		Seahorse.ipAddress( "ipv62", {"version" : 6}, {"okClass": "ok", "errorClass": "error"} );
		document.getElementById("ipv62").seahorse.verify();

		Seahorse.email( "email2", {}, {"okClass": "ok", "errorClass": "error"} );
		document.getElementById("email2").seahorse.verify();

		Seahorse.http( "http2", {}, {"okClass": "ok", "errorClass": "error"} );
		document.getElementById("http2").seahorse.verify();

		Seahorse.ftp( "ftp2", {}, {"okClass": "ok", "errorClass": "error"} );
		document.getElementById("ftp2").seahorse.verify();
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo">
		<tr>
			<td>ipAddress()</td>
			<td>version = 4</td>
			<td><input type="text" id="ipv42" value=""/></td>
		</tr>
		<tr>
			<td>ipAddress()</td>
			<td>version = 6</td>
			<td><input type="text" id="ipv62" value=""/></td>
		</tr>
		<tr>
			<td>email()</td>
			<td></td>
			<td><input type="text" id="email2" value=""/></td>
		</tr>
		<tr>
			<td>http()</td>
			<td></td>
			<td><input type="text" id="http2" value=""/></td>
		</tr>
		<tr>
			<td>ftp()</td>
			<td></td>
			<td><input type="text" id="ftp2" value=""/></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

4.5 Response options

The response options are used to define the actions to perform when it's detected that a field has a valid or invalid value. Unlike validation options, its parameters are common to all the functions of behaviors: okClass, errorClass, targetErrorClass, targetOkClass, targetId, hiddenElementId, callbackFunction, forbidEntrance, autoparse and errorMessage.

The parameters okClass and errorClass defines the CSS classes added to the field when it has a valid or invalid value.

View source code

<html>

<head>
<title>Seahorse example</title>

<style type="text/css">
	.colorGreen { color:green; }
	.colorRed { color:red; }
	.colorBlue { color:blue; }
	.colorYellow { color:yellow; }
</style>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.alphabetical( "resOpts1a", {}, {"okClass": "colorGreen", "errorClass": "colorRed",
			"forbidEntrance": false} );
		document.getElementById("resOpts1a").seahorse.verify();

		Seahorse.alphabetical( "resOpts1b", {}, {"okClass": "colorBlue", "errorClass": "colorYellow",
			"forbidEntrance": false} );
		document.getElementById("resOpts1b").seahorse.verify();
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo">
		<tr>
			<td>alphabetical()</td>
			<td>okClass = 'colorGreen', errorClass = 'colorRed'</td>
			<td><input type="text" id="resOpts1a" value=""/></td>
		</tr>
		<tr>
			<td>alphabetical()</td>
			<td>okClass = 'colorBlue', errorClass = 'colorYellow'</td>
			<td><input type="text" id="resOpts1b" value=""/></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

The parameters targetErrorClass and targetOkClass are used to determine the CSS classes added, after the field loses focus, to an HTML element when the field value is valid or invalid. The target parameter indicates the id of the element you add those classes.

View source code

<html>

<head>
<title>Seahorse example</title>

<style type="text/css">
	.colorGreen { color:green; }
	.colorRed { color:red; }
	.colorBlue { color:blue; }
	.colorYellow { color:yellow; }
</style>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.alphabetical( "resOpts2a", {},
			{"targetOkClass": "colorGreen", "targetErrorClass": "colorRed",
			"forbidEntrance": false, "targetId": "resOpts-targetA"} );

		Seahorse.alphabetical( "resOpts2b", {},
			{"targetOkClass": "colorBlue", "targetErrorClass": "colorYellow",
			"forbidEntrance": false, "targetId": "resOpts-targetB"} );
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo">
		<tr>
			<td>alphabetical()</td>
			<td>
				targetOkClass = 'colorGreen', targetErrorClass = 'colorRed',<br/>
				targetId = 'resOpts-targetA'
			</td>
			<td><input type="text" id="resOpts2a" value=""/></td>
			<td id="resOpts-targetA">target</td>
		</tr>
		<tr>
			<td>alphabetical()</td>
			<td>
				targetOkClass = 'colorBlue', targetErrorClass = 'colorYellow',<br/>
				targetId = 'resOpts-targetB'
			</td>
			<td><input type="text" id="resOpts2b" value=""/></td>
			<td id="resOpts-targetB">target</td>
		</tr>
	</table></center>
	</form>

</body>
</html>

The hiddenElementId parameter indicates the id of an HTML element that will hide or show depending if the value of the field is valid or invalid.

View source code

<html>

<head>
<title>Seahorse example</title>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.alphabetical( "resOpts3a", {},
			{"hiddenElementId": "resOpts-hiddenTargetA", "forbidEntrance": false} );
		document.getElementById("resOpts3a").seahorse.verify();
		
		Seahorse.alphabetical( "resOpts3b", {},
			{"hiddenElementId": "resOpts-hiddenTargetB", "forbidEntrance": false} );
		document.getElementById("resOpts3b").seahorse.verify();
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo">
		<tr>
			<td>alphabetical()</td>
			<td>hiddenElementId = 'resOpts-hiddenTargetA'</td>
			<td><input type="text" id="resOpts3a" value=""/></td>
			<td><span id="resOpts-hiddenTargetA">target</span></td>
		</tr>
		<tr>
			<td>alphabetical()</td>
			<td>hiddenElementId = 'resOpts-hiddenTargetB'</td>
			<td><input type="text" id="resOpts3b" value=""/></td>
			<td><span id="resOpts-hiddenTargetB">target</span></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

The callbackFunction parameter lets you define a function that is invoked when the field loses focus and which tells you whether it has a valid or invalid value.

View source code

<html>

<head>
<title>Seahorse example</title>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.alphabetical( "resOpts4a", {},
			{"callbackFunction": function(elem, valid) {alert(valid);}, "forbidEntrance": false} );

		Seahorse.numeric( "resOpts4b", {},
			{"callbackFunction": function(elem, valid) {alert(valid);}, "forbidEntrance": false} );
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo">
		<tr>
			<td>alphabetical()</td>
			<td>callbackFunction = function(elem, valid) {alert(valid);}</td>
			<td><input type="text" id="resOpts4a" value=""/></td>
		</tr>
		<tr>
			<td>numeric()</td>
			<td>callbackFunction = function(elem, valid) {alert(valid);}</td>
			<td><input type="text" id="resOpts4b" value=""/></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

The forbidEntrance parameter lets you specify whether to preventing, through onKeyPress event, the entry of characters that would make invalid the value of the field. By default, it prevents the entry of such characters.

View source code

<html>

<head>
<title>Seahorse example</title>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.numeric( "resOpts5a", {}, {"forbidEntrance": false} );

		Seahorse.numeric( "resOpts5b", {}, {"forbidEntrance": true} );
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo">
		<tr>
			<td>numeric()</td>
			<td>forbidEntrance = 'false'</td>
			<td><input type="text" id="resOpts5a" value=""/></td>
		</tr>
		<tr>
			<td>numeric()</td>
			<td>forbidEntrance = 'true'</td>
			<td><input type="text" id="resOpts5b" value=""/></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

The autparse parameter lets you specify whether to convert the contents of the field, after it loses focus of it, to avoid the appearance of unnecessary characters.

View source code

<html>

<head>
<title>Seahorse example</title>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.integer( "resOpts6a", {"groupingCharacter" : ','}, {"autoparse": false} );

		Seahorse.integer( "resOpts6b", {"groupingCharacter" : ','}, {"autoparse": true} );
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET">
	<center><table class="cuadro_ejemplo">
		<tr>
			<td>integer()</td>
			<td>groupingCharacter : ',', autparse = 'false'</td>
			<td><input type="text" id="resOpts6a" value=""/></td>
		</tr>
		<tr>
			<td>integer()</td>
			<td>groupingCharacter : ',', autparse = 'true'</td>
			<td><input type="text" id="resOpts6b" value=""/></td>
		</tr>
	</table></center>
	</form>

</body>
</html>

The errorMessage parameter defines a message that explains the conditions on which a value entered into the field to be considered valid. This parameter only makes sense to define when the form, of the input, has a behavior assigned through one of the functions of this library.

4.6 Forms

The function form() allows to add a behavior to forms, whereby, before sending the form, checks if all fields have valid values. This function takes as parameters the id of the form, the function that is invoked when you try to send the form, but one or more of its fields have invalid values, and an error message.

View source code

<html>

<head>
<title>Seahorse example</title>

<style type="text/css">
	.ok { background-color:#f0fff0; }
	.error { background-color:#fff0f0; }
</style>

<script type="text/javascript" src="js/seahorse-1.2.js"></script>
<script type="text/javascript">
	function init()
		{
		Seahorse.text("form0_username", {"notEmpty": true},
		    {"okClass": "ok", "errorClass": "error", "errorMessage": "Username required"});
		document.getElementById("form0_username").seahorse.verify();

		Seahorse.email("form0_email", {"notEmpty": true},
		    {"okClass": "ok", "errorClass": "error", "errorMessage": "E-mail address required"});
		document.getElementById("form0_email").seahorse.verify();

		Seahorse.form("form0", function(msjs, array) {alert(msjs);}, "Submit error" );
		}
</script>
</head>

<body onload="javascript:init();">

	<form action="" method="GET" id="form0">
	<center><table class="cuadro_formulario">
		<tr>
			<td align="right">Username</td>
			<td align="left"><input id="form0_username" type="text" name="username" value=""/></td>
		</tr>
		<tr>
			<td align="right">Password</td>
			<td align="left"><input type="password" name="password" value="1234"/></td>
		</tr>
		<tr>
			<td align="right" valign="top">Gender</td>
			<td align="left">
				<input type="radio" name="gender" value="M" checked/><br/>
				<input type="radio" name="gender" value="F"/>
			</td>
		</tr>
		<tr>
			<td align="right">E-mail</td>
			<td align="left"><input id="form0_email" type="text" name="email" value=""/></td>
		</tr>
		<tr>
			<td align="right">Receive news</td>
			<td align="left"><input type="checkbox" name="news" value="true"/><br/></td>
		</tr>
		<tr>
			<td align="right" valign="top">Preferences</td>
			<td align="left"><select name="preferences" multiple="multiple">
				<option>Option A</option>
				<option>Option B</option>
			    <option>Option C</option>
			    <option>Option D</option>
			</select></td>
		</tr>
		<tr>
			<td colspan="2" align="right">
				<button id="form_0_btn">Send</button>
			</td>
		</tr>
	</table></center>
	</form>

</body>
</html>

4.7 The 'seahorse' object

When a behavior is assigned to an element, an object is created and stored as an attribute in the element. This object stores the validation and response options of the behavior of the element, as well as the definition of the functions validate(), parse() and verify().

validate() and verify() verify whether the field has a valid value or not, with the difference that verify() also performs the actions defined by the response options, so sometimes it may be appropriate to invoke this function after the page loads.

parse(), if the field is a number, an integer, a date, an hour or an IP address, it returns the converted value, depending on type of field.

Since Seahorse behaviors make use of the onKeyUp event, onBlur and onKeyPress to implement the real-time validation, on the object 'seahorse' the functions related to this events, and assigned before the assignation of the behavior, are also stored. These functions are invoked after the functions relating to the real-time validation.

Choose your language

Sitio web diseñado por www.creadoresweb.com.ar

1. Introducción 2. Validación 3. Conversión 4. Comportamiento 5. Otras funciones 6. jQuery 1. Introduction 2. Validation 3. Parsing 4. Behaviors 5. Others functions 6. jQuery 1. Introduction 2. Validation 3. Convertion 4. Comportements 5. Autres fonctions 6. jQuery
Descargar versión HTML Download HTML version Télécharger version HTML
Descargar versión PDF Download PDF version Télécharger version PDF
Comprar versión impresa Buy printed version Acheter version imprimée

text()
text()	asciiCharacters = false
text()	asciiCharacters = true

text()	requiredCharacters = "_"
alphanumeric()	requiredCharacters = "a1"
alphabetical()	requiredCharacters = ["a", "b"]

text()	forbiddenCharacters = "_"
alphanumeric()	forbiddenCharacters = "a1"
alphabetical()	forbiddenCharacters = ["a", "b"]

alphanumeric()	allowedCharacters = " "
alphabetical()	allowedCharacters = "123"
numeric()	allowedCharacters = ["a", "b"]

text()	aditionalValidation = oddLength()
text()	aditionalValidation = evenLenght()

number()	decimalCharacter = '.', groupingCharacter = ','
number()	decimalCharacter = ',', groupingCharacter = '.'
number()	decimalCharacter = '.', groupingCharacter = ' '

date()	format = mm/dd/yyyy
date()	format = dd/mm/yyyy
date()	format = yy-m-d
time()	format = hh:mm:ss
time()	format = h-m-s

date()	format = yyyy-mm-dd
date()	format = yyyy-mm-dd, autofill = true
date()	format = yyyy-mm-dd, autofill = false
time()	format = hh:mm:ss
time()	format = hh:mm:ss, autofill = true
time()	format = hh:mm:ss, autofill = false

date()	format = dd/mm/yyyy, minValue = "01/01/1996", maxValue = "07/07/2010"
date()	format = dd/mm/yyyy, minValue = "01/01/2010", maxValue = "31/12/2010"
time()	format = hh:mm:ss, minValue = "00:00:00", maxValue = "12:00:00"
time()	format = hh:mm:ss, minValue = "12:34:56", maxValue = "23:59:59"

ipAddress()	version = 4
ipAddress()	version = 6
email()
http()
ftp()

number()
integer()

Username
Password
Gender
E-mail
Receive news
Preferences

alphabetical()	okClass = 'colorGreen', errorClass = 'colorRed'
alphabetical()	okClass = 'colorBlue', errorClass = 'colorYellow'

alphabetical()	targetOkClass = 'colorGreen', targetErrorClass = 'colorRed', targetId = 'resOpts-targetA'		target
alphabetical()	targetOkClass = 'colorBlue', targetErrorClass = 'colorYellow', targetId = 'resOpts-targetB'		target

alphabetical()	hiddenElementId = 'resOpts-hiddenTargetA'		target
alphabetical()	hiddenElementId = 'resOpts-hiddenTargetB'		target

alphabetical()	callbackFunction = function(elem, valid) {alert(valid);}
numeric()	callbackFunction = function(elem, valid) {alert(valid);}

numeric()	forbidEntrance = 'false'
numeric()	forbidEntrance = 'true'

integer()	groupingCharacter : ',', autparse = 'false'
integer()	groupingCharacter : ',', autparse = 'true'