jQuery EasyUI Form -Валидация формы

В этом руководстве будет показано, как проверять форму. Фреймворк EasyUI предоставляет плагин validatebox для проверки формы. В этом руководстве мы создадим контактную форму и применим плагин validatebox для проверки формы. Затем вы сможете настроить эту форму в соответствии со своими потребностями.

Создание формы (form)

Давайте создадим простую контактную форму с полями name, email, subject и 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>

Мы добавляем класс easyui-validatebox к тегу input, чтобы тег input применял валидацию на основе атрибута validType.

Предотвращение отправки формы при недействительной форме

Когда пользователь нажимает кнопку отправки формы, если форма недействительна, мы должны предотвратить отправку формы.

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

Если форма недействительна, будет отображено сообщение с подсказкой.

Скачать примеры jQuery EasyUI

jeasyui-form-form3.zip