jQuery EasyUI Form -Validation de formulaire

Ce tutoriel vous montrera comment valider un formulaire. Le framework EasyUI fournit un plugin validatebox pour valider un formulaire. Dans ce tutoriel, nous allons créer un formulaire de contact et appliquer le plugin validatebox pour valider le formulaire. Vous pouvez ensuite ajuster ce formulaire selon vos besoins.

Créer le formulaire (form)

Créons un formulaire de contact simple avec les champs nom, email, sujet et 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>

Nous ajoutons une classe nommée easyui-validatebox à la balise input, ainsi la balise input appliquera la validation en fonction de l'attribut validType.

Empêcher la soumission du formulaire lorsque le formulaire est invalide

Lorsque l'utilisateur clique sur le bouton de soumission du formulaire, si le formulaire est invalide, nous devons empêcher la soumission du formulaire.

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

Si le formulaire est invalide, un message d'invite sera affiché.

Télécharger les exemples jQuery EasyUI

jeasyui-form-form3.zip