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. losjqxValidator se utiliza para validar el formulario HTML con la ayuda de JavaScript. Tiene un conjunto de reglas integradas 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
El evento validationSuccess se activa cuando el formulario se valida sin errores.
Sintaxis:
$('#jqxValidator').on('validationSuccess',
function (event) { // Code section });
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 el evento jQWidgets validationSuccess .
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 validationSuccess Event
</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_validationSuccess"
value="Validate the above form"/>
<div id="log"></div>
<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_validationSuccess").jqxButton({
width: 200
});
$('#Employee_Form').on(
'validationSuccess', function (event) {
$("#log").html((
'The form has been filled correctly.'));
});
$("#button_for_validationSuccess").click(
function () {
$('#Employee_Form').jqxValidator(
'validate'
);
});
});
</script>
</center>
</body>
</html>
Producción:
Referencia: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxvalidator/jquery-validator-api.htm
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