9

コンポーネントの検証が失敗したときにCSSエラークラスをdivに追加できるテンプレートがあり、ブラウザーにかなり良い効果をもたらします。

これで、コンポーネントにcssクラスを追加する必要はありません（これは役に立ちません）が、それを囲むhtmlのcssを変更する必要があります。これは、jQueryを使用すると非常に簡単ですが、できます。検証に失敗したjavascriptコールバックを見つけたようですが、これは可能ですか？私はprimefacesも使用しています（そのような機能を提供する場合）。

マークアップ：

<div class="control-group ERROR_CLASS_GOES_HERE_IF_VALIDATION_FAILED">
   <label class="control-label">Input value:</label>
   <div class="controls">
      <h:inputText class=" inputbox" type="text" required="true" /> <!--Component that can fail -->
   </div>
</div>

入力テキストが空の場合、追加のクラスを持つために「コントロールグループ」をラップするdivが必要です。私はそれをJSFコンポーネントに変えることができ<h:panelGroup>ますが、それでもそれを行う方法がわかりません。私ができるので、Javascriptは簡単に思えます：

jQuery("#ID_OF_DIV").addClass("error_class")
4

2 に答える 2

24

に基づいて、JSF/EL に条件付きでクラスを出力させるだけFacesContext#isValidationFailed()です。

<div class="control-group #{facesContext.validationFailed ? 'error_class' : ''}">

この要素が ajax update/render によってカバーされていることを確認する必要があるだけです。

もう 1 つの方法はoncomplete、任意の PrimeFaces ajax ベースのコンポーネントのイベントにフックすることです。argsプロパティを持つスコープで利用可能なオブジェクトがありvalidationFailedます。たとえば<p:commandButton oncomplete>、または<p:ajaxStatus oncomplete>.

<p:ajaxStatus ... oncomplete="if (args &amp;&amp; args.validationFailed) $('#ID_OF_DIV').addClass('error_class')">
于 2013-03-13T11:52:11.213 に答える
1

クライアント側ですべてを行いたい場合。

     <h:outputText class="samplecls" rendered="#{facesContext.validationFailed}"
              value="Please enter all the required fields">
    </h:outputText>  


    <div class="control-group ERROR_CLASS_GOES_HERE_IF_VALIDATION_FAILED">
       <label class="control-label">Input value:</label>
       <div class="controls">
          <h:inputText class=" inputbox" type="text" required="true" /> <!--Component that can fail -->
       </div>
    </div>

Javascript/Jquery

 This class will exist in DOM only validation fails by rendered="#{facesContext.validationFailed}"


  $(window).load(function(){ 
      if($('.samplecls').length>0){
            $("#ID_OF_DIV").addClass("error_class");    
        }
});
于 2013-03-12T04:26:45.413 に答える