web-dev-qa-db-ja.com

クライアント側の検証-ユーザーがフィールドに入って空のままにしたときにカスタムイベントハンドラーが呼び出されない

これで説明されているように、クライアント側のフォーム検証を行うために、カスタムイベントハンドラーを含むいくつかのフィールドを持つJFormに取り組んでいます document

このドキュメントには、「ユーザーがフィールドから離れたときに、Joomlaがぼかしハンドラーを追加してフォームフィールドを検証する」と記載されています。

テキストフィールドに何かを入力してTabキーを押すか別のフィールドをクリックすると、カスタムイベントハンドラーが呼び出され、すべてが正常に動作します。ただし、フィールドに入力してから何も入力せずにフィールドを離れる場合、またはフィールドに入力して何かを入力し、それを削除してからフィールドを離れる場合：イベントハンドラーがまったく呼び出されないため、ユーザーに警告を表示できません。

これらの場合でも、カスタムイベントハンドラーが確実に呼び出されるようにするにはどうすればよいですか？

ソース：フォームxml（完全ではない）：

<form>
    <fields name="main">
        <fieldset name="basic" addfieldpath="/modules/mod_gngcontactmultiloc/models/fields">
            <field
                name="Email"
                type="text"
                label="MOD_GNGCONTACT_EMAIL"
                size="20"
                maxlenght="100"
                class="validate-myemail gngcontact"
            />

テンプレートファイル（完全ではない）：

    <?php 
    // No direct access
    defined('_JEXEC') or die;
    JHtml::_('behavior.formvalidator');
    JHtml::_('behavior.tooltip');
    ?>
    <script>

        jQuery(document).ready(function(){
           document.formvalidator.setHandler('myemail', function(value) {
              alert("hello");
              regex=/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
              var result = regex.test(value);
              if (result) {
                document.getElementById("msg-main[Email]").style.display = 'none';
              } 
              else 
              {
                document.getElementById("msg-main[Email]").style.display = 'block';
              };
              return result;
           });
        }); 

...

<form method="post" id="contactForm" name="contactForm" class="form-validate gngcontact">
...

上記のコードのアラートは、何か入力した後にフィールドを離れた場合に表示されますが、上記の太字で説明したシナリオでは表示されません。

UPDATE：@Zollieの最終的な結論は正しいです。 "required"属性を使用すると、この特殊なケースでも標準のJoomla検証が開始され、フィールドが変更されます赤に。残念ながら、カスタムイベントハンドラーによってカスタム検証アイコンとメッセージを表示したかったので、これでは十分ではありませんでした。この特別なケースでは、カスタムイベントハンドラーが呼び出されないようです。したがって、組み込みのJoomlaメカニズムを使用せずに、クライアント側の検証を最初から実装する必要がありました。

ありがとう、W.

joomla-3.xjavascriptjformvalidation
1
wanderlusted

requiredをフィールドの追加クラスとして追加することに喜びがありませんか？ https://docs.joomla.org/Special:MyLanguage/Client-side_form_validation ドキュメントページで、_<field name="email" type="text" class="required validate-email" size="30" />_はrequiredを_class="validate-myemail gngcontact"_。

あなたのjavascriptについては、私のスニペットに従うためのいくつかのメモがあります：

_<script>
  jQuery(document).ready(function() {
    document.formvalidator.setHandler('myemail', function(value) {
      alert("Validating value: " + value);
      let regex=/^(?:"[^"]+"|[^<>()[\]\\.,;:\s@"]+(?:\.[^<>()[\]\\.,;:\s@"]+)*)@(?:\[\d{1,3}(?:\.\d{1,3}){3}]|(?:[a-z\d-]+\.)+[a-z]{2,})$/i;
      let result = regex.test(value);
      if (result) {
          JQuery("input[name='email']").hide();
      } else {
          JQuery("input[name='email']").show();
      }
      return result;
    });
  });
</script>
_
  • 正規表現パターンロジックを維持するのに必要のない追加のキャプチャグループがいくつかあったので、それらを削除しました
  • キャプチャグループを非キャプチャグループに変換して、出力に部分文字列を返す意図がないことを伝えました。これは個人の好みの問題です。それは効率を向上させず、実際に各_?:_の後に_(_を追加することでパターンを長くします-したがって、必要に応じてこの調整を無視できます
  • 文字クラスの内側の開き角括弧はエスケープする必要はありません。ハイフンが宣言の最初または最後の文字である場合、または「文字の範囲」に続く場合、エスケープする必要はありません。
  • _\d_は_0-9_と同じです
  • パターンの末尾にi修飾子を追加すると、_[a-z]_を使用してすべてのアルファベット文字をカバーできます
  • おそらく、最良のアドバイスは、否定された文字クラスを_"_および貪欲な数量詞とともに使用して、最高の効率を実現することです。これはこのスクリプトに大きな影響を与えることはありませんが、誰もが知っているわけではないので、ベストプラクティスです。 _".+"_は_"[^"]+"_と同じではありません。前者は、一部のシナリオでは「オーバーマッチ」します。後者は_".+?"_のように動作しますが、より効率的です。

公式の内訳を確認したり、入力文字列をテストしたりする場合のパターンデモを以下に示します。 https://regex101.com/r/sua8lS/1/

セレクターが正しいかどうかはわかりませんが、jQueryを使用すると、リテラルshow()およびhide()アクションを実装できます。これは、非常に簡単です。

1
mickmackusa