Validation の使用

全て展開

すべて折りたたむ

クイックスタートの例に基づいて、validating イベントを使用した検証機能付きの３パネルフォームを作成できます。

Ajax 検証を使用するため、他の参照と共に <head> タグ内に jQuery Plugin の参照を追加する必要があります。

ドロップダウンから参照コードをコピーして head タグ内に貼り付けます

リファレンス	コードのコピー
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20173.128.js" type="text/javascript"></script> <!--Ajax jQuery Validation--> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js" type="text/javascript"></script>

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを、以下を実行するスクリプトに置き換えます。

ウィジェットを初期化し、validating 関数を追加します。
activeIndexChanged 関数を追加し、最後のページの［次へ］ボタンを［送信］ボタンに変更します。
show メソッドを使用して、ユーザーがステップヘッダーをクリックしてパネルを変更できるようにします。

ドロップダウンからスクリプトをコピーして、<head> セクション内に貼り付けます

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { var $validator = $("#signupform").validate(); $('#pages').wijwizard({ validating: function (e, args) { if (args.nextIndex < args.index) return true; $("#signupform").valid(); var elements = $validator.invalidElements(); if (elements.length === 0) return true; var isValid = false; $.each(elements, function (i, ele) { if ($.contains(args.panel, ele)) { isValid = true; return false; } }); return !isValid; }, activeIndexChanged: function(e, data){ var w = $(this).data("wijmoWijwizard"), nb = w.nextBtn; if (data.index === w.count() - 1){ nb.removeClass(".ui-state-disabled").bind("click.submit", function(){ $("form").submit(); }).find(".ui-button-text").text("submit"); }else{ nb.find(".ui-button-text").text("next"); } } }); $('li.ui-widget-header').each(function (index, elem) { $(elem).click(function (args) { var stepIndex = $('li.ui-widget-header').index(elem); $('#pages').wijwizard("show", stepIndex); }); }); }); </script>

HTML ファイルの <body> セクションで、基本ウィザードマークアップを次に置き換えます。これは、３ページの入力フォームを含むウィザードを作成します。

ドロップダウンからスクリプトをコピーして、<head> セクション内に貼り付けます

マークアップ	コードのコピー
<form id="signupform"> <div id="pages"> <ul> <li><a href="#logindata">Login data</a></li> <li><a href="#personaldata">Personal data</a></li> <li><a href="#subscriptions">Subscriptions</a></li> </ul> <div id="logindata"> <p> <label for="username">Username</label> <input id="username" name="username" class="required" minlength="3" maxlength="20" type="text" /> </p> <p> <label for="email">Email address</label> <input id="email" name="email" class="required email" type="text" /> </p> <p> <label for="password">Password</label> <input name="password" type="password" class="required" id="password" minlength="4" maxlength="50" /> </p> <p> <label for="confirmpassword">Confirm Password</label> <input name="confirmpassword" type="password" class="required" equalTo="#password" id="confirmpassword" /> </p> </div> <div id="personaldata"> <p> <label for="street">Street</label> <input id="street" name="street" class="required" minlength="3" maxlength="50" type="text" /> </p> <p> <label for="city">City</label> <input id="city" name="city" class="required" minlength="3" maxlength="50" type="text" /> </p> </div> <div id="subscriptions"> <p> <label for="weekly">Weekly Newsletter</label> <input id="weekly" name="weekly" type="checkbox" /> </p> <p> <label for="updates">Product Updates</label> <input id="updates" name="updates" type="checkbox" /> </p> <p> <label for="terms">Terms and conditions</label> <input id="terms" name="terms" class="required" type="checkbox" /> </p> </div> </div> </form>

マークアップ

コードのコピー

<form id="signupform">
    <div id="pages">
        <ul>
            <li><a href="#logindata">Login data</a></li>
            <li><a href="#personaldata">Personal data</a></li>
            <li><a href="#subscriptions">Subscriptions</a></li>
        </ul>
        <div id="logindata">
            <p>
                <label for="username">Username</label>
                <input id="username" name="username" class="required" minlength="3" maxlength="20" type="text" />
            </p>
            <p>
                <label for="email">Email address</label>
                <input id="email" name="email" class="required email" type="text" />
            </p>
            <p>
                <label for="password">Password</label>
                <input name="password" type="password" class="required" id="password" minlength="4" maxlength="50" />
            </p>
            <p>
                <label for="confirmpassword">Confirm Password</label>
                <input name="confirmpassword" type="password" class="required" equalTo="#password" id="confirmpassword" />
            </p>
        </div>
        <div id="personaldata">
            <p>
                <label for="street">Street</label>
                <input id="street" name="street" class="required" minlength="3" maxlength="50" type="text" />
            </p>
            <p>
                <label for="city">City</label>
                <input id="city" name="city" class="required" minlength="3" maxlength="50" type="text" />
            </p>
        </div>
        <div id="subscriptions">
            <p>
                <label for="weekly">Weekly Newsletter</label>
                <input id="weekly" name="weekly" type="checkbox" />
            </p>
            <p>
                <label for="updates">Product Updates</label>
                <input id="updates" name="updates" type="checkbox" />
            </p>
            <p>
                <label for="terms">Terms and conditions</label>
                <input id="terms" name="terms" class="required" type="checkbox" />
            </p>
        </div>
    </div>    
</form>

HTML ファイルを保存し、それをブラウザで開きます。実際のウィジェットは、WizardValidation を使用して次のように表示されます。

関連トピック

参照