在 JSF 中提交表单后掩码输入不起作用

Question

我有这个掩码输入定义：

<ui:define name="additional-javascript">
    <h:outputScript name="jquery.maskedinput-1.3.min.js" library="javascript" />
    <script>
            jQuery(function($){
            $("[id='register_form:cnpj']").mask("99.999.999/9999-99");
        });
    </script> 
</ui:define>

以这种形式：

<h:form id="register_form">
    <div class="four columns alpha">
        CNPJ : <h:message id="m_cnpj" for="cnpj" styleClass="red" />
        <h:inputText id="cnpj" value="#{clientec.cb.cliente.cnpj}" styleClass="cnpj">
            <f:ajax event="blur" render="m_cnpj" />
        </h:inputText>
    </div>
   <div class="twelve columns alpha"></div>
   //.. other input fields
</h:form>

这工作得很好，但是如果用户在表单中填写了错误的内容并提交，则此输入字段中的掩码将不再起作用。

为什么？有人知道为什么吗？这对我来说似乎有点奇怪，因为 HTML 在提交表单后不会更改任何内容。

Answer 1

如果在表单提交时重新呈现输入组件本身，就会发生这种情况。重新呈现将导致 HTML DOM 中的原始 HTML 元素被 ajax 响应中的新 HTML 元素替换。即使它们可能表示完全相同，新的HTML元素也不再附加jQuery掩码。基本上，你需要在其上重新执行jQuery掩码。但是，您在那里声明的jQuery函数仅在DOM就绪（页面加载时）上运行。它不会在后续的 ajax 请求中重新执行。

您基本上有 2 个选项：

1. 不要在表单提交的重新呈现中包含输入组件。例如，让表单提交仅重新呈现消息组件而不是@form。

   <h:form>
       <h:inputText id="input1" ... />
       <h:message id="m_input1" ... />
       <h:inputText id="input2" ... />
       <h:message id="m_input2" ... />
       <h:inputText id="input3" ... />
       <h:message id="m_input3" ... />
       <h:commandButton ...>
           <f:ajax ... render="m_input1 m_input2 m_input3" />
       </h:commandButton>
   </h:form>
   

2. 完成表单提交后重新运行 jQuery 函数。有几种方法可以实现此目的。基本上，要么将<script>移动到<h:form>内部（假设您在重新渲染中使用@form）

   <h:form>
       <h:inputText id="input1" ... />
       <h:message id="m_input1" ... />
       <h:inputText id="input2" ... />
       <h:message id="m_input2" ... />
       <h:inputText id="input3" ... />
       <h:message id="m_input3" ... />
       <h:commandButton ...>
           <f:ajax ... render="@form" />
       </h:commandButton>
       <script>$("[id='register_form:cnpj']").mask("99.999.999/9999-99");</script>
   </h:form>
   

   或者定义一个在完成时运行的 JSF ajax 事件处理程序，并将其挂接到<f:ajax onevent>

   。 例如

   <f:ajax ... render="@form" onevent="function(data) { if (data.status == 'success') applyMask() }" />