問題タブ [html5-validation]

現在、angular2 を使用した検証に取り組んでいます。HTML5 の電子メールとウェブサイトのバリデーターとvalidngModel のプロパティに問題があります。

例えば：

入力したすべての単語は問題ありません。#email.validHTML5 バリデータが存在しないかのように true のままです。

したがって、フォームのボタンは常に有効になっています。しかし、ボタンを押すと、電子メール フィールドが無効であることを示す HTML 警告が表示されるため、検証は機能していますが、#email.validそれでも有効です。

angular2 の ngModel ディレクティブを HTML5 バリデーターで使用することは可能ですか?

フィールドが無効な場合、ホバー時に html5 検証エラー バブルを表示するにはどうすればよいですか。現在、フォームを送信してその要素にスクロールすると、1つしか表示されません。これに加えて、要素をホバー/フォーカスしたときにもエラーメッセージを表示したい

現在、送信時に最初のエラー要素にバブルが1つしか表示されず、他の要素にカーソルを合わせるとバブルは表示されません。ホバーしたバブルが欲しい

HTML5 検証に基づいてブラウザー検証エラー メッセージを表示できない理由を理解しようとしています。

マークアップに検証したいフィールドと、クリック時に起動するかどうかを知るためにその有効性を調査するリンクがあります。特に、これはフォーム内にあるわけではなく、HTML5 仕様を読んでも、それが問題かどうかはわかりません。確かに、フォーム外のフィールドに checkValidity メソッドを使用できるという事実は、検討する価値があることを示唆しています。

HTML

JavaScript/JQuery

これまでに見た動作から、無効な電子メール アドレスを入力してリンクをクリックしようとすると、(仕様に基づいて) 「単純なイベント」が発生することが予想されます。ブラウザのエラーメッセージ表示をフックする必要があることを理解してください。

ただし、代わりに検証メッセージは表示されません。検証は失敗し、リンクをたどることはできません。有効な電子メールを入力すると、その逆になります。イベントがどのように発生または処理されるかについて何か不足していますか?

フィールドの周りにフォームと送信ボタンを作成することを含む他の回答がありますが、これは私の最後の手段になりますが、それは目的の機能を得るために余分な無意味なノイズが多く、私が何の根本的な原因を理解したいのですか?見てます。

デフォルトの HTML5 フロントエンド フォーム検証が、作成した Symfony 3 フォームの特定のフィールドに適用されないという問題が発生しています。

フィールド自体は、EntityType クラスの子であるカスタム フィールド タイプのインスタンスです。選択肢は、jQuery を介してこのフィールドに動的に追加できます。これらの変更は、PreSumbmitEvent コールバックで新しい選択肢をフォーム オブジェクトに追加することで、フォーム オブジェクトに反映されます。これはすべて機能します。

私が抱えている問題は、Symfony Forms の生成された選択フィールドを非表示にし、チェックボックスのドロップダウンで構成される複数選択ウィジェットを追加するために使用しなければならない jquery プラグインが原因です。これらのチェックボックスは、ボックスがチェックされると、非表示の select 要素からオプションを動的に選択します。

問題:
select 要素が非表示になっているという事実は、HTML5 フロントエンド検証によって提供されるツール ヒントも非表示にするため、ユーザーがこのフィールドに入力していない場合、フォームはサイレントに失敗します。

どうやら、HTML5 フロントエンド検証はチェック ボックスのグループを検証できないため、HTML5 の組み込みフォーム検証を使用して検証をウィジェットに委譲することはできません。フォーム クラスでウィジェットが定義されていないため、Symfony の「error_mapping」機能を使用しても機能しません。このフィールドに何らかのカスタム フロントエンド検証を実装したいと考えていますが、フィールドが空の場合に JavaScript を使用してフォームの送信を停止する方法がわかりません。

私の質問:
symfony フォームがフロントエンドで送信されないようにするにはどうすればよいですか? Symfony フォームの送信を停止するために HTML5 フロントエンド検証は何を行っていますか? JavaScript を使用してこれを行う方法はありますか?

ご意見ありがとうございます。

Angular 2 (2.0.0) を使用して、 Angular Formsを使用してフィールドを必須として動的にマークする推奨される方法は何ですか?

すべての例で、required 属性は次のように追加されています。

バインドしているモデルにIsRequiredプロパティがある場合、それは true/false になりますか?

次のようなものを使用する場合：

これはページ上で次のようにレンダリングされます ( ="true"に注意してください):

何らかの理由で、実際の値 ( ="true" ) がある場合、Angular はこの属性を認識しないように見えるため、このフィールドが空白の場合でも、フォーム自体は有効です。

requiredしたがって、 ではなくand を使用する必要があるように見えますrequired="true"が、その属性を動的に追加するにはどうすればよいでしょうか?

うまくいかないもの：

フィールドに基づいて「必須」の文字列を返す関数を作成できると思いましたが、テンプレートエラーが発生するだけです。

requiredこれを達成し、自分の属性に対してのみレンダリングする方法はありますか? または、値が true/false の場合に Angular にこの属性を認識させる方法はありますか?

FWIW -プロパティに基づいて*ngIf2 つのほぼ同一のコントロールを記述し、属性を使用して 1 つをハードコードするために使用できることを確認しましたが、それはかなりハッキリしているようです。もっと良い方法があることを願っています！<input type='text' />IsRequiredrequired

フォームに次のような複数のフィールドがあります

required ex decimalのようなものを作成して、毎回パターンとカスタム メッセージを記述する必要がないようにすることはできますか?

私はHTML 5を初めて使用するので、質問をより明確にする必要がある場合は助けてください。ありがとうございます。