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í

Artículos relacionados
0 Comentarios
Enviame un comentario