問題タブ [html5-validation]

約 400 の入力フィールドを持つマスクがあり、すべてクライアントにロードされます。マスクは、ユーザーが必要なすべてのフィールドを直接表示および編集できるように、いくつかのタブとアコーディオンで構成されています。編集の最後に、クライアントでマスクが検証されます。

タブとアコーディオンにはjQuery UIを使用し、クライアントの検証にはjQuery Validation Pluginを使用します。サーバー上で ASP.NET MVC を実行します。必要な属性を含む HTML を生成するには、data-val-*さまざまな手法を使用します。

• デフォルトの EditorFor ヘルパー関数 ( @Html.EditorFor(model => model.property)
• 特定の TextBoxFor、DropDownListFor ヘルパー関数 (`@Html.EditorFor(model => model.property')

• 特定の書式設定が必要な場合のカスタム HTML タグ:

  /li>

ただし、拡張機能は使用しません。生成されたフィールドはすべて非常によく似ています。例:

この入力を 8 文字以上に変更するvalueと、フィールドが赤くマークされ、エラーが表示され、すべてがうまく機能します。

ただし、送信を押すと、検証に約12.5秒かかります-これはIEから取得したものです-プロファイラー:

この質問を更新する前に多くの人がコメントで述べたように、DOM 操作により実行が非常に遅くなりますが、jQuery-Validation プラグインが HTML ページに新しい要素を追加する理由がわかりません。showLabelここでは、DOM 操作を実行する関数を確認できます。

ただし、興味深いことに、エラー ラベルまたは同様のものが表示されるか、DOM に表示されるようになりました。また、マスクにはラベルを表示するスペースがないため、実際にはラベルを表示したくありません。最新のブラウザーと HTML 5 検証のほとんどで機能するため、エラーが表示される場合はツールヒント テキストを使用することをお勧めします。

短期的な解決策として、何らかの形で (このマスクのみ) DOM 操作を無効にできるとよいでしょう。いくつかの構成で可能ですか？

より洗練されたソリューションは、JavaScript の代わりに HTML 5 検証を使用することです。これは、お客様が既に IE 9 または 10 を使用しており、必要に応じて、それをサポートする 10 にアップグレードできるためです。私は昨年 11 月に SO の質問を見つけました: W3C 仕様による ASP.NET MVC 5 および HTML 5 フォーム属性- 何かが変更されたか、このように変更される予定ですか? すべてのフィールドを手動で実装するのは大変な作業になるためです。

設計上の理由により、使用できません

フォームを送信します。代わりに、コードは次のようになります。

フォームには、

属性。残念ながら、HTML5 検証はこの方法では機能しません。ただし、通常の送信ボタンでは適切に機能します。

理由についてのアイデアはありますか？送信ボタンを使用せずに HTML5 検証をトリガーする方法はありますか?

リクエストに応じて編集：

選択検証のための私のコードで

そしてコントローラーで私は持っています

ボタンをクリックすると、通常の html5 検証のようにポップアップが表示され、Angular の検証が機能しません。

ここに同じフィドルがあります。 http://jsfiddle.net/priya78/nF7eJ/65/

ボタンを外して使えば

ボタンのクリック時に必要な赤いテキストを表示したい。

Google Apps Script HTML サービスの使用時に HTML5 フォーム検証を使用しようとしています。別のユーザーが尋ねたように、ドキュメントの例によると、送信入力の代わりにボタン入力を使用する必要があります。送信ボタンを使用すると検証が行われるように見えますが、とにかくサーバー関数が呼び出されます。そのユーザーに与えられた答えは私にはうまくいきませんでした。また、フォームを送信するときに 2 つの関数を呼び出したいのですが、これにより複雑になる可能性があります。

これが私がやろうとしていることです: ユーザーがフォームに入力し、Google Doc を生成して URL を渡します。彼が送信ボタンをクリックすると、素敵なスピナーとともに「ドキュメントが作成されています」という jQuery UI ダイアログが表示されます。次に、ドキュメントが生成されたら、リンクを彼に渡します。私は成功ハンドラーを使用して、Google Doc の作業が終了したときに結果を表示しますが、その間、スピナーを表示する関数が必要です。onclick イベントに別の関数を追加するよりも良い方法があるかどうかはわかりません。何らかの方法でプロセスに損害を与える可能性があります。フォームが有効でない場合 (HTML5 検証を使用)、これらの関数を呼び出さない方法はありますか?

これは私のコードの簡略版です:

Code.gs

Page.html

Javascript.html

ドキュメントで推奨されているように、 3 つの HTML ドキュメントはすべて、include 関数を使用して結合されます (それぞれのタグで動作します) 。

私はjQueryが初めてです。どんなアドバイスでも大歓迎です。

最後の質問: ダイアログの [キャンセル] ボタンはダイアログを閉じますが、ドキュメントの作成は停止しません。このプロセスを停止することは可能ですか? 私はそうは思わない。

事前にどうもありがとうございました。

質問のように、まさにそれが私の要件です。

入力フィールド「5」を空にしないでください。また、ユーザーがフィールドを手動で編集したくありません。

私が欲しいのは、ユーザーがドロップボックスでアイテムを選択または選択すると、私のJSとPHPは自動的に入力フィールド「5」に値を割り当てます.(これは私が望む条件です)

今仮定します。ユーザーがドロップボックスを選択せず​​にフォームを送信すると、ドロップボックスの値がデフォルト値になりますが、ユーザーがドロップボックスをクリックしていないため、JS が機能せず、入力フィールド「5」に値が割り当てられない
ため、フォームは空または入力フィールド "5" が無効になっているため、入力フィールド "5" の値があり ません="" HTML5 検証が機能していません

JSFiddle デモ(送信ボタンをクリックし、入力フィールド「5」が検証されない...)

IE8 で HTML5 をサポートするために webshims を使用しています。私の HTML5 フォーム検証は IE8 で動作しています。しかし、ポップアップにフォームがある場合 (Angular UI Modal を使用しています)、フォーム送信 (ng-submit) でモーダル ボックスが閉じ、検証メッセージが右上隅に表示されます。

私の環境は

• jquery-1.11.1.js
• AngularJS v1.2.26
• Angular UI モーダル 0.10.0
• webshim-1.15.4

コンソールで、このスクリプト エラーが発生します

「無効な要素が隠されているようです。要素を表示するか、無効化/読み取り専用を使用して要素を検証から除外します。fieldset[disabled] を使用すると、要素のグループを無視できます! 選択置換の場合は、shims/form-combat.js を参照してください。問題を修正します。」

Angular アプリの HTML ロード webshims の一部

// 動的ビューの読み込み時に Polyfill を更新するための angular アプリの以下のメソッド。

ポップアップ/モーダルを呼び出す角度関数

モーダルウィンドウの私のフォーム

フィールドの横にあるポップアップに検証が正しく表示されるようにする必要があります。

Firefox または Chrome でこれら 2 つのフィドルを確認してください。この例ではrequired、属性とsubmitボタンを備えた単純なフォームしかありません。ボックスが空のときに「送信」を押すと、スタイルが適用されますinvalid(Firefox では赤いアウトライン)。ただし、送信を押して無効であることを示すまで待機します。

今これを試してみてください。いくつかのcssがあることを除いて、同じです：

今回を除いて、送信が押される前でもオレンジ色の境界線が適用されます。そのため、フォームのスタイルを手動で設定した場合にのみinvalid、ブラウザーはそれを適用する前にそれを適用しますが、これは直感的な動作ではありません。もちろん、何かを入力する前に必須フィールドは無効になります。

これを修正する方法はありますか？