Cómo validar un formulario con Javascript y jQuery

Estrada Web Group
Administrador
Cómo validar un formulario con Javascript y jQuery

Cómo validar un formulario con Javascript y jQuery

Cuando tenemos un formulario que debe ser llenado por el usuario es necesario garantizar que la información que el usuario captura sea limpia, correcta y útil. Los campos típicos que debemos validar son:

  • Validar correo electrónico
  • Validar los campos requeridos
  • Validar fechas
  • Validar URL del sitio web
  • Validar carga de archivo
  • Validar campos desplegables

Ejemplo:

El siguiente ejemplo valida un formulario utilizando JavaScript, te mostrare cómo crear las validaciones en javascript y jQuery enviando mensajes de error. Encuentra el código fuente a continuación:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Form validation in javascript with example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/additional-methods.min.js"></script>

    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $("#smart-form").validate({
                errorClass: "state-error",
                validClass: "state-success",
                errorElement: "em",
                highlight: function (element, errorClass, validClass) {
                    $(element).closest('.field').addClass(errorClass).removeClass(validClass);
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).closest('.field').removeClass(errorClass).addClass(validClass);
                },
                errorPlacement: function (error, element) {
                    if (element.is(":radio") || element.is(":checkbox")) {
                        element.closest('.option-group').after(error);
                    } else {
                        error.insertAfter(element.parent());
                    }
                }
            });
        });
    </script>

</head>

<body class="woodbg">

    <div class="smart-wrap">
        <div class="smart-forms smart-container wrap-2">

            <div class="form-header header-primary">
                <h4><i class="fa fa-pencil-square"></i>Validar Form con JavaScript y jQuery</h4>
            </div><!-- end .form-header section -->

            <form method="post" id="smart-form">
                <div class="form-body">

                    <div class="frm-row">
                        <div class="section colm colm6">
                            <label for="firstname" class="field prepend-icon">
                                <input type="text" name="firstname" id="firstname" class="gui-input"
                                       data-rule-required="true"
                                       data-rule-letterswithbasicpunc="true"
                                       data-msg-required="First name is required"
                                       data-msg-letterswithbasicpunc="Please enter letters only"
                                       placeholder="Nombres...">
                                <span class="field-icon"><i class="fa fa-user"></i></span>
                            </label>
                        </div><!-- end section -->

                        <div class="section colm colm6">
                            <label for="lastname" class="field prepend-icon">
                                <input type="text" name="lastname" id="lastname" class="gui-input"
                                       data-rule-required="true"
                                       data-rule-letterswithbasicpunc="true"
                                       data-msg-required="Last name is required"
                                       data-msg-letterswithbasicpunc="Please enter letters only"
                                       placeholder="Apellidos...">
                                <span class="field-icon"><i class="fa fa-user"></i></span>
                            </label>
                        </div><!-- end section -->
                    </div><!-- end .frm-row section -->

                    <div class="section">
                        <label for="useremail" class="field prepend-icon">
                            <input type="email" name="useremail" id="useremail" class="gui-input"
                                   data-rule-required="true"
                                   data-rule-email="true"
                                   data-msg-required="Enter email address"
                                   data-msg-email="Enter a VALID email address"
                                   placeholder="Nombre de usuario">
                            <span class="field-icon"><i class="fa fa-envelope"></i></span>
                        </label>
                    </div><!-- end section -->

                    <div class="section">
                        <label for="website" class="field prepend-icon">
                            <input type="url" name="website" id="website" class="gui-input"
                                   data-rule-required="true"
                                   data-msg-required="Enter website url"
                                   data-rule-url="true"
                                   data-msg-url="Enter VALID url"
                                   placeholder="Web site">
                            <span class="field-icon"><i class="fa fa-globe"></i></span>
                        </label>
                    </div><!-- end section -->

                    <div class="section">
                        <label class="field select">
                            <select id="language" name="language"
                                    data-rule-required="true"
                                    data-msg-required="Select a language">
                                <option value="">Lenguaje...</option>
                                <option value="EN">English</option>
                                <option value="FR">French</option>
                                <option value="SP">Spanish</option>
                                <option value="CH">Chinese</option>
                                <option value="JP">Japanese</option>
                            </select>
                            <i class="arrow double"></i>
                        </label>
                    </div><!-- end section -->

                    <div class="section">
                        <label for="file1" class="field file">
                            <span class="button btn-primary"> Choose File </span>
                            <input type="file" class="gui-file" name="upload1" id="file1" onChange="document.getElementById('uploader1').value = this.value;"
                                   data-rule-required="true"
                                   data-msg-required="Please upload a file"
                                   data-rule-accept="image/jpeg,image/pjpeg,image/png,image/gif,image/bmp,image/tiff"
                                   data-msg-accept="Only image files allowed"
                                   data-rule-filesize="10485760"
                                   data-msg-filesize="Please upload 10MB or less">
                            <input type="text" class="gui-input" id="uploader1" placeholder="Seleccionar archivo" readonly>
                        </label>
                    </div><!-- end  section -->

                    <div class="section">
                        <label class="field select-multiple">
                            <select name="mobileos" id="mobileos"
                                    data-rule-required="true"
                                    data-msg-required="Select an OS" multiple>
                                <option value="0">Windows 10 </option>
                                <option value="1">Windows 7 </option>
                                <option value="2">Google Android</option>
                                <option value="3">Apple iOS</option>                                
                            </select>
                        </label>
                    </div><!-- end  section -->

                    <div class="section">
                        <label for="comment" class="field prepend-icon">
                            <textarea class="gui-textarea" id="comment" name="comment"
                                      data-rule-required="true"
                                      data-msg-required="Please enter your comments"
                                      placeholder="Comentario">
                            </textarea>
                            <span class="field-icon"><i class="fa fa-comments"></i></span>
                            <span class="input-hint">
                                <strong>DO NOT:</strong> Be negative or off topic, we expect a great comment...
                            </span>
                        </label>
                    </div><!-- end section -->

                </div><!-- end .form-body section -->
                <div class="form-footer">
                    <button type="submit" class="button btn-primary"> Validate Form </button>
                    <button type="reset" class="button"> Cancel </button>
                </div><!-- end .form-footer section -->
            </form>

        </div><!-- end .smart-forms section -->
    </div><!-- end .smart-wrap section -->

    <div></div><!-- end section -->

</body>
</html>

¿Qué te pareció el ejemplo?

Espero que te haya gustado y servido este artículo basado en cómo validar un formulario en JavaScript y jQuery con mensajes de error. Me gustaría recibir tus comentarios y sugerencias. Tus comentarios son muy valiosos para mejorar cada día, preguntas o comentarios sobre este artículo siempre son bienvenidos.

Descarga el ejemplo completo aquí

Compartir artículo:

Más artículos geniales

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;