jQuery EasyUI Formulario -Validación de formularios

Este tutorial le mostrará cómo validar un formulario. El framework easyui proporciona un plugin validatebox para validar un formulario. En este tutorial, crearemos un formulario de contacto y aplicaremos el plugin validatebox para validar el formulario. Luego podrá ajustar este formulario según sus propias necesidades.

Crear el formulario (form)

Creemos un simple formulario de contacto con los campos name, email, subject y message:

    <div style="padding:3px 2px;border-bottom:1px solid #ccc">Form Validation</div>
    <form id="ff" method="post">
        <div>
            <label for="name">Name:</label>
            <input class="easyui-validatebox" type="text" name="name" required="true"></input>
        </div>
        <div>
            <label for="email">Email:</label>
            <input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>
        </div>
        <div>
            <label for="subject">Subject:</label>
            <input class="easyui-validatebox" type="text" name="subject" required="true"></input>
        </div>
        <div>
            <label for="message">Message:</label>
            &lt;textarea name="message" style="height:60px;"&gt;&lt;/textarea&gt;
        </div>
        <div>
            <input type="submit" value="Submit">
        </div>
    </form>

Agregamos un estilo llamado easyui-validatebox a la etiqueta input, por lo que la etiqueta input aplicará la validación según el atributo validType.

Evitar el envío del formulario cuando el formulario no es válido

Cuando el usuario hace clic en el botón submit del formulario, si el formulario no es válido, debemos evitar el envío del formulario.

    $('#ff').form({
        url:'form3_proc.php',
        onSubmit:function(){
            return $(this).form('validate');
        },
        success:function(data){
            $.messager.alert('Info', data, 'info');
        }
    });

Si el formulario no es válido, se mostrará un mensaje de aviso.

Descargar ejemplos de jQuery EasyUI

jeasyui-form-form3.zip