jQWidgets es un marco de JavaScript para crear aplicaciones basadas en web para PC y dispositivos móviles. Es un marco muy potente, optimizado, independiente de la plataforma y ampliamente compatible. El jqxValidator se utiliza para la validación del formulario HTML con la ayuda de JavaScript. Tiene un conjunto de reglas incorporadas según el requisito para la validación de las entradas del usuario, correo electrónico, SSN, ZIP, valor máximo, valor mínimo, intervalo, etc. Aquí también se pueden escribir reglas personalizadas según el específico requisitos
ActualizarPosición( )El método se utiliza para actualizar las posiciones de todas las sugerencias para el jqxvalidator especificado. Este método es útil al cambiar el tamaño de la ventana actual.
Sintaxis:
$('#jqxValidator').jqxValidator('updatePosition');
Parámetros: este método no acepta ningún parámetro.
Valores devueltos: este método no devuelve ningún valor.
Archivos vinculados: descargue jQWidgets desde el enlace dado. En el archivo HTML, busque los archivos de script en la carpeta descargada.
<link rel=”hoja de estilo” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></ script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxvalidator.js”></script>
Ejemplo: El siguiente ejemplo ilustra el método jQWidgets updatePosition() . En el siguiente ejemplo, después de ejecutar el código, la ventana actual ha cambiado de tamaño, por lo que se ha cambiado la posición de las sugerencias. Entonces, después de invocar el método updatePosition() , la posición de todas las sugerencias se actualiza a su posición predeterminada.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript"
src="scripts/jquery.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxvalidator.js"></script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxValidator updatePosition() Method
</h3>
<form id="Employee_Form">
<table>
<tr>
<td>Employee_Name:</td>
<td>
<input type="text" id="Employee_Name" />
</td>
</tr>
<tr>
<td>Employee_Id:</td>
<td>
<input type="text" id="Employee_Id" />
</td>
</tr>
<tr>
<td>Designation:</td>
<td>
<input type="text" id="Designation" />
</td>
</tr>
<tr>
<td>Base_Location:</td>
<td>
<input type="text" id="Base_Location" />
</td>
</tr>
</table>
</form>
<input type="button" style="margin: 28px;"
id="button_for_updatePosition"
value="Update the position of all hints" />
<script type="text/javascript">
$(document).ready(function () {
$('#Employee_Form').jqxValidator({
Rules: [{
input: '#Employee_Name',
message: 'Employee name is mandatory!',
rule: 'required'
},
{
input: '#Employee_Id',
message: 'Employee_Id is mandatory!',
rule: 'required'
},
{
input: '#Designation',
message: 'Designation is mandatory!',
rule: 'required'
},
{
input: '#Base_Location',
message: 'base location is mandatory!',
rule: 'required'
}],
});
$("#button_for_updatePosition").jqxButton({
width: 250
});
$('#Employee_Form').jqxValidator('validate');
$("#button_for_updatePosition").click(
function () {
$('#Employee_Form').jqxValidator(
'updatePosition');
});
});
</script>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA