| Inicio Home Accueil | Tutorial | Documentación Documentation Documentation | Descargas Downloads Téléchargements | Contacto Contact Contact |
Los comportamientos permiten realizar la validación en tiempo real de los campos de un formulario mediante los eventos de pérdida de foco y de presionado de una tecla. Los comportamientos son asignados mediante diferentes funciones que reciben como parámetro el id o la referencia del campo, las opciones de validación y las opciones de respuesta.
Las opciones de validación determinan como es validado el campo y son similares a los parámetros recibidos por las funciones de validación. Las opciones de respuesta permiten determinar las acciones que se realizarán cuando se detecte que un campo posee un valor válido o inválido.
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.
Les comportements permettre la validation en temps réel des champs des formulaires par les événements de la perte de focus et une touche pressée. Les comportements sont affectées avec des fonctions différentes que reçoivent, comme paramètres, le identificateur ou le référence du champ, les options pour la validation et les options de réponse.
Les options de validation déterminent comment le champ est validé et sont similaires aux paramètres reçus par les fonctions de validation. Les options de réponse déterminent les actions à entreprendre quand il détecte que le champ a une valeur valide ou invalide.
Para definir entradas que aceptan datos tipo texto, existen los métodos text(), que por sí solo no impone ninguna restricción, alphanumeric(), que solo acepta letras y números (no permite símbolos ni signos de puntuación), alphabetical(), que solo acepta letras, y numeric(), que solo acepta números.
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.
Pour définir les entrées qui acceptent des données textuelles, il existe des méthodes text(), qui par elle-même n'impose aucune restriction, alphanumeric(), qui n'accepte que les lettres et chiffres (ne permet pas de symboles ou de ponctuation), alphabetical(), qui accepte uniquement les lettres, et numeric(), qui accepte uniquement des nombres.
Como opciones de validación, todas las funciones aceptan los parámetros: notEmpty, minLength, maxLength, asciiCharacters, requiredCharacters, forbiddenCharacters, allowedCharacters y aditionalValidation.
As validation options, all the functions accept the parameters: notEmpty, minLength, maxLength, asciiCharacters, requiredCharacters, forbiddenCharacters, allowedCharacters and aditionalValidation.
Comme options de validation, toutes les fonctions d'acceptent les paramètres: notEmpty, minLength, maxLength, asciiCharacters, requiredCharacters, forbiddenCharacters, allowedCharacters et aditionalValidation.
notEmpty permite indicar si una entrada puede ser dejada o no en blanco. Por defecto su valor es falso (las entradas se pueden dejar en blanco).
notEmpty allows to indicate whether a field can be left blank or not. The default is false (fields can be left blank).
notEmpty permet d'indiquer si un champ ne peut être laissé en blanc ou non. La valeur par défaut est faux (les champs peuvent être laissés vides).
<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 y maxLength permiten definir la cantidad mínima y máxima de caracteres que puede tener una entrada.
minLength and maxLength let you set the minimum and maximum number of characters that can have an input.
minLength et maxLength vous permettent de définir le nombre minimal et maximal de caractères qui peut avoir une entrée.
<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 permite indicar si la entrada permitirá solo el ingreso de caracteres ASCII, en vez de permitir todos los caracteres Unicode. Por defecto, se permiten todos los caracteres.
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.
asciiCharacters permet d'indiquer si le champ seulement permettra l'entrée des caractères ASCII, plutôt que de permettre à tous les caractères Unicode. Par défaut, tous les caractères Unicode sont autorisés.
<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 permite indicar los caracteres que deben ser ingresados para que la entrada sea considerada válida.
requiredCharacters lets you specify the characters that has to be entered for the field be considered valid.
requiredCharacters vous permet de spécifier les caractères que doivent être inscrit à l'entrée pour être considéré valide.
<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 permite indicar los caracteres que no deben ser ingresados para que la entrada sea considerada válida.
forbiddenCharacters allows to indicate the characters that must not be entered in order that the entry be considered to be valid.
forbiddenCharacters permet d'indiquer les caractères qui ne doivent pas être déposés pour que l'entrée soit considérée valide.
<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 permite indicar un grupo de caracteres que una entrada puede tener y aún así ser considerada válida. Este parámetro permite, por ejemplo, que una entrada de tipo alphabetical acepte algunos signos de puntación.
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.
allowedCharacters permet d'indiquer un groupe de caractères qu'un champ peut avoir et encore être considéré valide. Ce paramètre permet, par exemple, qu'un champ de type alphabetical accepte quelques signes de ponctuation.
<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 permite especificar una función que realice una verificación adicional para determinar si la entrada es válida o no.
aditionalValidation allows specify a function to perform an additional verification to determine if the input is valid or not.
aditionalValidation permets de spécifier une fonction pour effectuer une vérification supplémentaire pour déterminer si le champ est valide ou non.
<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>
Para definir entradas numéricas se debe utilizar las funciones number(), para números de todo tipo, e integer(), para números enteros.
To set numeric inputs you should use the functions number(), for numbers of all types, and integer(), for integers.
Pour configurer des champs numériques il faut utiliser les fonctions number(), pour les numéros de tous types, et integer(), pour les entiers.
Como opciones de validación, las funciones aceptan los parámetros: groupingCharacter, decimalCharacter, minValue, maxValue, notEmpty y aditionalValidation.
As validation options, the functions accept the parameters: groupingCharacter, decimalCharacter, minValue, maxValue, notEmpty and aditionalValidation.
Comme les options de validation, les fonctions acceptent les paramètres: groupingCharacter, decimalCharacter, minValue, maxValue, notEmpty et aditionalValidation.
decimalCharacter y groupingCharacter permiten definir que caracteres se utilizarán, respectivamente, como separador decimal y como separador de miles o caracter de agrupamiento.
decimalCharacter and groupingCharacter are used to define which characters are used, respectively, as decimal separator and grouping character (or thousands separator).
decimalCharacter et groupingCharacter permettent de définir les caractères que seront utilisés, respectivement, comme séparateur décimal et caractère de groupement (ou séparateur de milliers).
<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 y maxValue permiten definir los valores mínimos y máximos que puede tomar una entrada.
minValue and maxValue defines the minimum and maximum values that an input can have
minValue et maxValue définissent les valeurs minimales et maximales que peut avoir un champ.
<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 y aditionalValidation funcionan de manera idéntica que en el caso de textos.
notEmpty and aditionalValidation work in the same way as in the case of texts.
notEmpty et aditionalValidation marchent de la même manière que dans le cas de textes.
Para definir campos de fechas y horarios se debe utilizar las funciones date(), para fechas, y time(), para horarios.
To set date and time inputs you should use the functions date(), for dates, and time(), for hours.
Pour définir les champs de date et l'heure il faut utiliser les fonctions date(), pour dates, et time(), pour horaires.
Como opciones de validación, las funciones aceptan los parámetros: format, autofill, minValue, maxValue, notEmpty y aditionalValidation.
As validation options, the functions accept the parameters: format, autofill, minValue, maxValue, notEmpty and aditionalValidation.
Comme options de validation, les fonctions acceptent les paramètres: format, autofill, minValue, maxValue, notEmpty et aditionalValidation.
format permite definir el formato de la fecha u hora. El formato para las fechas se constituye mediante la combinación de 'd' o 'dd' (día de uno o dos dígitos), 'm' o 'mm' (mes de uno o dos dígitos) y 'yy' o 'yyyy' (año de dos o cuatro dígitos). El formato para las horas se constituye mediante la combinación de 's' o 'ss' (segundos de uno o dos dígitos), 'm' o 'mm' (minutos de uno o dos dígitos) y 'h' o 'hh' (horas de uno o dos dígitos).
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).
format définit le format de la date ou l'heure. Le format des dates est constitué par la combination de 'd' ou 'dd' (jour d'un ou de deux chiffres), 'm' ou 'm' (mois d'un ou de deux chiffres) et 'yy' ou 'yyyy' (ans de deux ou de quatre chiffres). Le format pour les horaires est constitué par la combination de 's' ou 'ss' (secondes d'un ou de deux chiffres), 'm' ou 'mm' (minute d'un ou de deux chiffres) et 'h' ou 'hh' (heures d'un ou de deux chiffres).
<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 indica si los campos incompletos de una fecha u hora deben ser completados con la fecha u hora actual.
autofill indicate if the incompleted fields of a date or a time must be completed with the actual date or time.
autofill indique si les chiffres incomplètes de la date ou l'heure doivent être remplis avec la date ou heure actuelle
<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 y maxValue permiten definir los valores mínimos y máximos que puede tomar una entrada.
minValue and maxValue defines the minimum and maximum values that can have an input.
minValue et maxValue définit les valeurs minimales et maximales que peut avoir un champ.
<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 y aditionalValidation funcionan de manera idéntica que en el caso de textos.
notEmpty and aditionalValidation work in the same way as in the case of texts.
notEmpty et aditionalValidation marchent de la même manière que dans le cas de textes.
Las funciones ipAddress(), email(), http() y ftp() permiten, respectivamente, definir campos para direcciones IP, direcciones de e-mail y direcciones HTTP o FTP.
The functions ipAddress(), email(), http() and ftp() allow, respectively, define fields for IP addresses, e-mail and HTTP or FTP address.
Le fonctions ipAddress(), email(), http() et ftp() permettent, respectivement, de définir des champs pour les adresses IP, e-mail et adresses HTTP ou FTP.
Como opciones de validación, las funciones aceptan solo los parámetros notEmpty y aditionalValidation, salvo por ipAddress() que acepta, además, el parámetro version que puede tomar los valores 4 o 6.
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.
Comme options de validation, les fonctions acceptent seulement les paramètres notEmpty et aditionalValidation, sauf ipAddress() qu'il accepte également le paramètre version que peut prendre les valeurs 4 ou 6.
<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>
Las opciones de respuesta permiten determinar las acciones se realizan cuando se detecta que un campo posee un valor válido o inválido. A diferencia de las opciones de validación, sus parámetros son comunes a todas las funciones de comportamiento: okClass, errorClass, targetErrorClass, targetOkClass, targetId, hiddenElementId, callbackFunction, forbidEntrance, autoparse y errorMessage.
Los parámetros okClass y errorClass determinan las clases CSS que se agregan al campo cuando su valor es válido o inválido.
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.
Les options de réponse servent pour déterminer les actions sont effectuées quand il détecte que le champ a une valeur valide ou invalide. Contrairement aux options de validation, ses paramètres sont communs à toutes les fonctions de comportement: okClass, errorClass, targetErrorClass, targetOkClass, targetId, hiddenElementId, callbackFunction, forbidEntrance, autoparse et errorMessage.
Les paramètres okClass et errorClass déterminent les classes CSS à ajouter sur le champ, selon si sa valeur est valide ou invalide.
<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>
Los parámetros targetOkClass y targetErrorClass determinan las clases CSS que se agregan, luego de que el campo pierde el foco, a un elemento HTML cuando el valor del campo es válido o inválido. El parámetro targetId indica el id del elemento al que se agregan esas clases.
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.
Les paramètres targetOkClass et targetErrorClass déterminent les classes CSS que sont ajoutés, après le champ perd le focus, à un élément HTML selon le valeur du champ est valide ou invalide. Le paramètre target indique l'id de l'élément auquel les classes sont ajoutés.
<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>
El parámetro hiddenElementId indica el id de un elemento HTML que se ocultará o mostrará, según el valor del campo sea válido o inválido.
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.
Le paramètre hiddenElementId indique l'ID d'un élément HTML qui peut être masqué ou affiché en fonction si le valeur du champ est valide ou invalide.
<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>
El parámetro callbackFunction permite definir una función que es invocada cuando se pierde el foco del campo y a la cual se le indica si el mismo tiene un valor válido o inválido.
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.
Le paramètre callbackFunction vous permet de définir une fonction qui est appelée lorsque le champ perd le focus et qui indique si le valeur est valide ou non.
<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>
El parámetro forbidEntrance permite indicar si se debe evitar, mediante el evento onKeyPress, el ingreso de caracteres que provocarían que el valor del campo sea inválido. Por defecto, se impide el ingreso de dichos caracteres.
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.
Le paramètre forbidEntrance permet de spécifier si de prévenir, par l'événement onKeyPress, l'entrée de caractères qui cause que le valeur du champ ne soit pas valide. Par défaut, il empêche l'entrée de ces caractères.
<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>
El parámetro autoparse permite indicar si se debe convertir el contenido del campo, luego de que se pierde el foco del mismo, a fin de evitar la aparición de caracteres innecesarios.
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.
Le paramètre autoparse vous permet de spécifier s'il faut convertir le contenu du champ, après qu'il perd le focus de celui-ci, pour éviter l'apparition de caractères inutiles.
<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>
El parámetro errorMessage define un mensaje que explica las condiciones que debe cumplir un valor ingresado al campo para ser considerado válido. Este parámetro solo tiene sentido definirlo cuando al formulario del campo se le asignó un comportamiento a través de una de las funciones de esta librería.
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.
Le paramètre errorMessage définit un message qui explique les conditions dans lesquelles une valeur inscrite dans le champ pour être considéré comme valide. Ce paramètre doit être défini quand le formulaire, dans lequel le champ est contenu, a été attribué un comportement par l'une des fonctions de cette bibliothèque.
La funcion form() permite agregar un comportamiento a los formularios, según el cual, antes de enviarse un formulario, se verifica si todos sus campos poseen valores válidos. Esta función recibe, como parámetros, el id del formulario, la función a la que se invoca cuando se intenta enviar el formulario pero uno o más de sus campos poseen valores inválidos y un mensaje de error.
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.
Le fonction form() permets ajouter un comportement aux formulaires, dans lequelle, avant l'envoi de le formulaire, vérifie si tous les champs ont des valeurs valides. Cette fonction prend comme paramètres l'id de la forme, la fonction qui est invoquée lorsque vous essayez d'envoyer le formulaire mais un ou plusieurs de ses champs ont des valeurs non valides et un message d'erreur.
<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>
Cuando se asigna un comportamiento a un elemento, se crea un objeto que es guardado, como un atributo, en el elemento. Este objeto almacena las opciones de validación y de respuesta del comportamiento del elemento, así también como la definición de las funciones validate(), parse() y verify().
validate() y verify() verifican si el campo posee un valor válido o no, con la diferencia de que verify(), además, ejecuta las acciones definidas por las opciones de respuesta, por lo cual a veces puede resultar conveniente invocar a esta función luego de que se carga la página.
parse(), si el campo es un número, un entero, una fecha, un horario o una dirección IP, devuelve el valor convertido, según su tipo, del campo.
Dado que los comportamientos de Seahorse hacen uso de los eventos onKeyUp, onBlur y onKeyPress para implementar la validación en tiempo real, en el objeto 'seahorse' se almacenan también las funciones, relacionadas a estos eventos, que el elemento poseía antes de asignársele el comportamiento . Estas funciones son invocadas después que las funciones relacionadas a la validación en tiempo real.
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.
Quand un comportement est attribué à un élément, un objet est creé et stocké comme un attribut de l'élément. Cette objet a les options de validation et de réponse du comportement de l'élément, ainsi que la définition des fonctions validate(), parse() et verify().
validate() et verify() vérifie si le champ a une valeur valide ou pas, avec le différence que verify() effectue également des actions définies par les choix de réponse, si parfois il peut être approprié de recourir à cette fonction après le chargement de la page.
parse(), si le champ est un nombre, un entier, une date, une heure ou une adresse IP, il retourne la valeur convertie, selon le type de donné.
Comme les comportements de Seahorse utilisent les événements onKeyUp, onBlur et onKeyPress pour mettre en œuvre la validation en temps réel, sur l'objet 'seahorse' sont stockées les fonctions liées à ces événements, que l'élément avait avant l'attribution du comportement. Ces fonctions sont invoquées après les fonctions relatives à la validation en temps réel.
