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. Las reglas personalizadas también se pueden escribir según el específico requisitos
La propiedad closeOnClick se usa para configurar u obtener si las sugerencias del jqxValidator especificado se cerrarán después de hacer clic en ellas o no. Este método acepta dos valores posibles que son verdadero y falso.
Sintaxis:
-
Para establecer la propiedad closeOnClick .
$('#jqxValidator').jqxValidator({ closeOnClick: true }); -
Para obtener la propiedad closeOnClick .
var closeOnClick = $('#jqxValidator').jqxValidator('closeOnClick');
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/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxvalidator.js”></script>
Ejemplo: El siguiente ejemplo ilustra la propiedad jQWidgets closeOnClick . En el siguiente ejemplo, el valor de la propiedad closeOnClick se ha establecido en true .
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/jqx-all.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxvalidator.js"></script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxValidator closeOnClick Property
</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_closeOnClick"
value="Value of the closeOnClick property" />
<div id="log"></div>
<script type="text/javascript">
$(document).ready(function () {
$('#Employee_Form').jqxValidator({
closeOnClick: true,
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_closeOnClick").jqxButton({
width: 300
});
$('#Employee_Form').jqxValidator('validate');
$("#button_for_closeOnClick").click(
function () {
var Value_of_closeOnClick =
$('#Employee_Form').
jqxValidator(
'closeOnClick');
$("#log").html(JSON.stringify(
Value_of_closeOnClick));
});
});
</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