jQuery EasyUI フォーム -フォーム検証

このチュートリアルでは、フォームを検証する方法を説明します。easyui フレームワークは、フォームを検証するための validatebox プラグインを提供します。このチュートリアルでは、連絡フォームを作成し、validatebox プラグインを適用してフォームを検証します。その後、ご自身のニーズに合わせてこのフォームを調整できます。

フォームを作成する

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>

input タグに easyui-validatebox というクラス名を追加します。これにより、input タグは validType 属性に基づいて検証が適用されます。

フォームが無効な場合にフォーム送信をブロックする

ユーザーがフォームの送信（submit）ボタンをクリックしたときに、フォームが無効な場合は、フォームの送信をブロックする必要があります。

    $('#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