9

我有一个模板，当组件验证失败时，我可以在其中向 div 添加一个 CSS 错误类，并且它在浏览器上呈现出非常好的效果。

现在，我不需要向组件添加 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 有一个额外的类。我可以把它变成一个<h:panelGroup>，所以它是一个 JSF 组件，但我仍然不知道该怎么做。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 覆盖。

另一种方法是挂钩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 回答