Question

我有一个模板，当组件验证失败时，我可以在div中添加一个CSS错误类，它会对浏览器产生非常好的效果。

现在，我不需要为组件添加css类（this对我没用），而是我需要更改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才能有一个额外的类。我可以把它变成<h:panelGroup>所以它是一个JSF组件，但我仍然不知道该怎么做。 Javascript似乎更容易，因为我能做到：

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

Answer 1

让JSF / EL根据FacesContext#isValidationFailed()有条件地打印课程。

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

您只需要确保ajax update / render包含此元素。

另一种方法是挂钩基于任意PrimeFaces ajax的组件的oncomplete事件。范围中有一个args对象，而该对象又具有validationFailed属性。例如。 <p:commandButton oncomplete>甚至<p:ajaxStatus oncomplete>。

<p:ajaxStatus ... oncomplete="if (args &amp;&amp; args.validationFailed) $('#ID_OF_DIV').addClass('error_class')">

Answer 2

如果你想在客户端做所有事情。

     <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");    
        }
});

JSF：验证失败的javascript回调

2 个答案: