3

私は asp.net mvc 3 を使用しており、目立たない javascriptを利用したいと考えています。私は非常に長いフォームを設計していますが、分割しないと非常に圧倒される可能性があります。

jquery フォーム ウィザードを使用して、圧倒されないようにウィザードに分割することにしました。ウィザードでデータ注釈と邪魔にならない Java スクリプトをどのように使用すればよいか、私は不思議に思っていません。

現時点では、すべてが 1 つの大きな形のままですが、ウィザードではバラバラに見えます。フォームの最後に送信ボタンが 1 つだけあり、クリックするとフォーム データがシリアル化され、そのデータでサーバーに ajax ポストが実行されます。

mvc検証を使用するときに初めて見たものから、クライアント側の検証がトリガーされる前に、ユーザーは送信ボタンをクリックする必要があります。送信を押しても何も起こらず、ウィザード全体を再度実行して検証エラーを見つける必要があるため、ユーザーがフィールドを離れると混乱するので、それが可能かどうか疑問に思っています。

間違えたらすぐに知らせてくれると助かります。

検証機能を持つ jquery フォーム プラグインを使用する jquery ウィザードは知っていますが、コードの一貫性を保つために、可能であれば 1 つの方法に固執するようにしています。

編集

これは私が送信ボタンに持っているものです

$('#frm').live('submit', function (event) {
    event.preventDefault();

    var $thisFrm = $(this);

    ValidatorParse($thisFrm);//jQuery.validator.unobtrusive.parse(selector);
    var clientCheck = $($thisFrm).validate().form();

    if (clientCheck) {
       // ajax post(server side validation will happen.If it does not pass serverside I send it back usually as json).
    }
});

したがって、これにはいくつかの問題があります。まず、送信時に検証のみが実際にトリガーされます。それがトリガーされ、検証エラーがウィザードの 2 番目のステップにある場合、ユーザーには表示されません (最初の間違った検証エラーを見つけてそのステップに切り替える方法を見つけられない限り)。

私が目にする 2 番目の問題は、検証エラーがあるかどうかを確認するために最後まで待たなければならないことです。私はむしろ彼らにできるだけ早く知らせます。

編集

ウィザードは jquery 検証を使用しているようですが、何らかの理由で mvc jquery 検証方法で動作していません。

さらに調査したところ、ウィザードはトリガーするクラスとして「必須」を確認する必要があることがわかりました

// will trigger validation
<input type="text" value="" name="AnnualFee" id="AnnualFee"
    data-val-required="Annual Fee Required" 
    data-val="true" 
    class="required ui-wizard-content ui-helper-reset ui-state-default error">

// will not trigger validation
    <input type="text" value="" name="AnnualFee" id="AnnualFee" 
    data-val-required="Annual Fee Required" 
    data-val="true" 
    class="ui-wizard-content ui-helper-reset ui-state-default">

クラスを使用してフォームを検証するjqueryの検証のドキュメントには表示されません。これはその人が作ったものですか？

4

3 に答える 3

1

jquery フォーム ウィザードを使用する場合は、送信ボタンに追加の JavaScript コードを追加する必要はありません(もちろん、初期化を除く)。

Microsoft MVC3の目立たない部分は、html 入力でマークされたすべての「data-*」属性 (たとえば、data-val-required="blah blah blah") をjquery-validation のよく知られたルールに変換するという退屈な作業を行うだけです。これは、フォームの検証を考える前に行われます!

したがって、モデルの RequiredValidationAttribute とフレンド (カスタム検証など) で十分です。

これを試してください（まだ試していない場合）：

  1. 完全なフォームを取得し、クラスstepを使用して「div」でスライスします。各 div はステップです (この部分は既に行ったと思います)。

  2. 送信ボタンと戻るボタンは次のとおりである必要があります。

    input class="navigation_button" id="back" type="reset" value="Back"

    input class="navigation_button" id="next" type="submit" value="Next"

  3. フォームウィザードを初期化する

    $(document).ready(function () {
    $("form").formwizard({ 
        formPluginEnabled: true,
        validationEnabled: true,
        focusFirstInput : true
    });
});

フォームウィザードは、ウィザードの各ステップの検証を呼び出します。

これを書く前に、それが機能することを証明するためにサンプルフォームを作成しました。

問題が間違っていたら申し訳ありません。

于 2011-12-27T13:07:47.987 に答える
0

こんな感じで使いました

function ValidateStep(){
    var validator = $("form").validate(); // obtain validator
    var anyError = false;
    if (!validator.element(this)) { // validate every input element inside this step
       anyError = true;
    }
    if(anyError) return false;
    return true;
}
于 2011-12-27T11:28:07.407 に答える
0

私のチームと私は定期的にウィザードを作成し、サーバー側の特定のテクノロジ アプローチに依存しないという点で独立したソリューションを持っています。一部の「ウィザード」は、チェックアウトに関して多くのステップを持つ 1 つのページを持つチェックアウト フローです。私はこれらを 100K 以上のウェブサイト開発の取り組みで行い、私の会社を通じて高いトラフィックを獲得しました。

これまでのところ、c# MVC、c# razor マトリックス スタイル、node.js、php、および python を使用しています。私たちは一般的なアプローチを採用しており、これをテクノロジー全体で再利用できます。私たちのアプローチは、HTML、CSS、および JavaScript を非常に厳密に分離するという点で MVC に似ています。

次のようになります。

  1. マークアップと CSS およびスクリプトへのリンクのみを含む 1 つのページを作成します。HTML5 互換、HTML5 フォーム互換などのフォーム要素内に、データ属性設定以外のインライン スタイルやインライン スクリプトを配置することはありません。サポートされていなくても、フォームの検証には HTLM 5 標準に準拠した JavaScript を使用します。独自のライブラリがありますが、jQuery ツールなどを使用できます。
  2. 全体的な再利用可能なスタイルとロジックを実行する main.css ファイルと main.js ファイルがあります。これらは、フロー全体を管理する作曲家と考えてください。
  3. ウィザードの各ステップで、各ステップに固有の個別の css と javascript を作成します。
  4. 非常に具体的なものになるように、css のステップに名前を付けます。
  5. jQuery を使用して検証を実行し、セレクターの名前空間を CSS アプローチの使用方法と同様に実行して、イベントが存在する場所に具体的にアタッチします。

そのため、どのテクノロジーでも機能する非常に明確な関心事の分離が得られます。あなたの場合、それをさらに進めて、各ステップの MVC で部分ビューを作成し、それぞれのステップで独自の CSS と JavaScript を読み込むことができるように、それらをそのように区分化できます。

私のプロフィールでは、チェックアウトでこの方法論を使用しているウェブサイトを見ることができます.

私は実際にはこれを完全な答えとは考えておらず、あなたからそれを具体化するにはさらにフィードバックが必要です.

于 2011-12-25T01:46:46.323 に答える