En este artículo, aprenderemos cómo implementar la validación de formularios utilizando el complemento jQuery Poppa . Es un complemento muy fácil de usar, confiable, compatible con varios navegadores y liviano que hace que la validación del lado del cliente sea muy simple.
Nota: descargue el complemento jQuery Poppa en la carpeta de trabajo e incluya los archivos necesarios en la sección principal de su código HTML.
<link href=”https://fonts.googleapis.com/css?family=Roboto:300,400,700”
rel=”stylesheet” type=”text/css”/>
<link href=”https://stackpath.bootstrapcdn. com/bootstrap/4.1.3/css/bootstrap.min.css”
rel=”stylesheet” type=”text/css”/>
<link href=”https://use.fontawesome.com/releases/v5.5.0 /css/all.css”
rel=”hoja de estilo” type=”text/css”/>
<link href=”validation.css?family=Roboto:300,400,700”
rel=”hoja de estilo” type=”text/css”/>
<link href=”global.css?family=Roboto:300,400,700”
rel=”stylesheet” type=”text/css”/>
<link href=”github.css?family=Roboto:300,400,700”
rel=”stylesheet” type =”texto/css”/>
<script src=”global.js”></script>
<script src=”poppa.js”>< /script>
<secuencia de comandos src=”highlight.js”></secuencia de comandos>
Ejemplo 1: El siguiente ejemplo demuestra una validación de formulario simple usando el complemento jQuery Poppa . El resultado muestra la validación en acción cuando se dan entradas no válidas.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>jQuery form validation Poppa plugin</title>
<link rel="stylesheet"
href=
"https://fonts.googleapis.com/css?family=Roboto:300,400,700">
<!-- Include Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Include FontAwesome CSS -->
<link rel="stylesheet"
href=
"https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<!-- Include the Poppa Plugin Stylesheets -->
<link rel="stylesheet" type="text/css"
href="validation.css">
<link rel="stylesheet" type="text/css"
href="global.css">
<link rel="stylesheet" type="text/css"
href="github.css">
<style>
h2 {
padding-left: 300px;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<b style="padding-left:300px">
jQuery form validation Poppa
plugin
</b>
<br><br>
<div class="container">
<div class="row">
<div class="col-9">
<div class="example-block mb-4">
<form action="" class="user-registration mb-3">
<h6 class="title mb-2 mt-0">
Registration form for User
</h6>
<div class="form-group">
<label>Login ID</label>
<input name="login" type="text"
data-validation-length="min:3"
class="form-control" required>
</div>
<div class="form-group">
<label>Email ID</label>
<input name="email" type="email"
class="form-control" required>
</div>
<div class="form-group">
<label>Password</label>
<input name="password" type="password"
class="form-control" required>
</div>
<div class="form-group">
<label>Website</label>
<input name="website" data-validation-type="url"
class="form-control">
</div>
<div class="form-group">
<label class="mb-0">
I agree to the terms of service
</label>
<input type="checkbox"
data-validation-message=
"You have to agree to terms of service"
required>
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
<!-- Include jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Include the Poppa Plugin Scripts -->
<script src="global.js"></script>
<script src="poppa.js"></script>
<script src="highlight.js"></script>
<script>
$(document).ready(function () {
/** Initiate highlighting */
hljs.initHighlightingOnLoad();
/** Initiate validation on each form */
$('.user-registration').validation({
'autocomplete': 'off',
'liveValidation': false
});
});
</script>
</body>
</html>
Producción:
Antes de la Validación:
Después de la validación:
Ingrese alguna entrada no válida para verificar la validación realizada por el complemento.
Ejemplo 2: El siguiente ejemplo demuestra el ejemplo anterior con validación en vivo activa con algunos cambios personalizados menores. Cuando la validación en vivo está habilitada, permite que cada entrada se valide inmediatamente. Esto sucede cuando el usuario escribe en la entrada o cuando pierde el foco.
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<title>jQuery form validation Poppa plugin</title>
<link rel="stylesheet"
href=
"https://fonts.googleapis.com/css?family=Roboto:300,400,700">
<!-- Include Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Include FontAwesome CSS -->
<link rel="stylesheet"
href=
"https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<!-- Include the Poppa Plugin Stylesheets -->
<link rel="stylesheet" type="text/css" href="validation.css">
<link rel="stylesheet" type="text/css" href="global.css">
<link rel="stylesheet" type="text/css" href="github.css">
<style>
h2 {
padding-left: 300px;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<b style="padding-left:300px">
jQuery form validation Poppa plugin
</b>
<p></p>
<div class="container">
<div class="row">
<div class="col-9">
<div class="example-block mb-4">
<form action="" class="live-validation mb-3"
id="live-validation">
<div class="form-group">
<label>Login ID</label>
<!-- Validation for Upper case only-->
<input name="login" type="text"
data-validation-regexp="^[A-Z]+$"
class="form-control" required>
</div>
<div class="form-group">
<label>Salary</label>
<!-- Validation for type number
with min and max values-->
<input name="login" type="number"
min="10000" max="30000"
class="form-control" required>
</div>
<div class="form-group">
<label>Email ID</label>
<input name="email" type="email"
class="form-control" required>
</div>
<div class="form-group">
<label>Password</label>
<input name="password"
data-validation-type="alphanumeric"
type="password" class="form-control"
required>
</div>
<div class="form-group">
<label>Website</label>
<!-- Valid url patterns include
www.sitename.com or
https://www.sitename.com -->
<input name="website"
data-validation-type="url"
class="form-control">
</div>
<div class="form-group">
<label>Describe yourself</label>
<textarea name="bio"
data-validation-length="min:10,max:150"
data-validation-hint="Write your biodata"
data-validation-hint="Describe about yourself"
class="form-control">
</textarea>
</div>
<div class="form-group">
<label class="mb-0">
I agree to the terms of service
</label>
<!-- Custom validation message -->
<input type="checkbox"
data-validation-rqmessage=
"Please agree to terms of service"
required>
</div>
<button type="submit" class="btn btn-primary">
Submit Form
</button>
</form>
</div>
</div>
</div>
</div>
<!-- Include jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Include the Poppa Plugin Scripts -->
<script src="global.js"></script>
<script src="poppa.js"></script>
<script src="highlight.js"></script>
<script>
$(document).ready(function () {
/* Initiate highlighting */
hljs.initHighlightingOnLoad();
/* Initiate live validation on each form */
$('.live-validation').validation({
'autocomplete': 'on',
'liveValidation': true
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA