¿Qué es la validación discreta en jQuery?

jQuery es una biblioteca de Javascript. Una validación discreta en jQuery es un conjunto de extensiones auxiliares HTML de ASP.Net MVC. Al usar los atributos de datos de validación de jQuery junto con los atributos de datos de HTML 5, puede realizar la validación en el lado del cliente.

La validación discreta significa que sin escribir mucho código de validación, puede realizar una validación simple del lado del cliente agregando los atributos adecuados e incluyendo los archivos de script adecuados.

Estas bibliotecas de validación discretas deben agregarse:

jquery.validar.min.js
jquery.validate.unobtrusive.js

Instalación a través de administradores de paquetes:

```
Bower: bower install jquery-validation
```

NuGet: Install-Package jQuery.Validation

```
NPM  : npm i jquery-validation 
```

Lista de algunos atributos de validación de datos:

Requerido
- data-val-required=”Esto es requerido.”
- valor-datos=”verdadero/falso”
Dirección de correo electrónico
- data-val-email=”Mensaje de error”
Longitud máxima
- data-val-maxlength=”Mensaje de error”
- data-val-maxlength-max=”Longitud máxima (por ejemplo, 5)”
Longitud mínima
- data-val-minlength=”Mensaje de error”
- data-val-minlength-min=”Longitud mínima (por ejemplo, 2)”

Método para la validación discreta:

En primer lugar, debemos agregar esas bibliotecas en el script de los archivos HTML. Estas bibliotecas proporcionan una lista de atributos de datos (valor de datos, valor de datos requerido y muchos más) para la validación. Luego, el formulario debe construirse de acuerdo con los requisitos en los que se pueden usar diferentes tipos de atributos de datos.

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <!--These validation libraries need to be 
        included for unobtrusive validation -->
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
      </script>
        <script src=
"https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js">
      </script>
        <script src=
"https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js">
      </script>
    </head>
    <body>
        <form id="myform">
            <p>
                <label for="roll">Roll no.</label>
                <!-- data-val-required is used to 
                   specify the msg for each rule -->
                <!-- data-val is used to add rules to 
                      the input elements -->
                <input name="roll" 
                       type="number" 
                       data-val-required="Roll no. is required." 
                       data-val="true" 
                       style="margin-left: 15px;" /><br />
                <span data-valmsg-for="roll" 
                      data-valmsg-replace="true" 
                      style="margin-left: 75px; color: red;" />
            </p>
            <p>
                <label for="name">Name</label>
  
                <input name="name" 
                       type="text" 
                       data-val-required="Name is required."
                       data-val="true" 
                       style="margin-left: 30px;" /><br />
                <span data-valmsg-for="name" 
                      data-valmsg-replace="true" 
                      style="margin-left: 75px; color: red;" />
            </p>
            <p>
                <label for="mobile">Mobile no.</label>
                <input name="mobile" 
                       type="number" 
                       data-val-required="Mobile no. is required." 
                       data-val="true" /><br />
                <span data-valmsg-for="mobile" 
                      data-valmsg-replace="true" 
                      style="margin-left: 78px; color: red;" />
            </p>
  
            <p>
                <label for="email">E-Mail </label>
                <input type="email" name="email" 
                       data-val-required="Email is required." 
                       data-val="true" 
                       style="margin-left: 30px;" /><br />
                <span data-valmsg-for="email" 
                      data-valmsg-replace="true" 
                      style="margin-left: 80px; color: red;" />
            </p>
  
            <p>
                <input class="submit" 
                       type="submit" 
                       value="Submit" />
            </p>
        </form>
    </body>
</html>

Producción:

Antes de enviar:

Después de enviar:

Publicación traducida automáticamente

Artículo escrito por vishal_sharma14 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta