Question

我有下面的表格，我有一个jquery片段，它将$添加到用户输入的开头，无论他们输入与否。

如果我提交表单并且验证失败，我的jquery片段将不再用于将$添加到用户的输入中。

为什么在表单验证后这不起作用？

<h:form id="add">

    <h:outputLabel for="startDate" value="Start Date" />
    <h:panelGrid columns="1">
        <p:message for="startDate" />
        <p:calendar value="#{fundingBacker.startDate}" id="startDate" mode="popup" navigator="true" required="true" requiredMessage="Start Date is required" />
    </h:panelGrid>

    <h:outputLabel for="totalCost" value="Total Cost" />
    <h:panelGrid columns="1">
        <p:message for="totalCost" />
    <p:inputText value="#{fundingBacker.totalCost}" id="totalCost" styleClass="currency">
        <f:convertNumber currencySymbol="$" groupingUsed="#{true}" maxFractionDigits="0" type="currency"></f:convertNumber>
    </p:inputText>
    </h:panelGrid>

    <p:commandButton value="Add Grant" type="submit"  actionListener="#{fundingBacker.add}"  />
</h:form>

jQuery代码段

 $(document).ready(function() {
        $('.currency').on('keyup', function() {
        console.log('keyup');
        if($(this).val().indexOf('$') == -1) {
            $(this).val('$'+$(this).val()); 
        }
        });
    }

Answer 1

在HTML DOM准备好填充时，在页面加载期间会触发$(document).ready()。但是，您最有可能在提交时更新表单（您当前的代码没有显示，但这样验证消息永远不会出现，当然您必须在某处执行此操作）。当您对表单进行ajax-udpate时，JavaScript已使用ajax响应中的新元素替换HTML DOM树中的表单元素。但是，$(document).ready()在ajax更新后不会运行，因此这些新元素永远不会应用于keyup处理程序。

基本上有两种解决方案：

在完成ajax请求时重新运行$(document).ready()中的代码。

E.g。

<p:commandButton ... oncomplete="applyCurrencyOnKeyup()" />

与

$(document).ready(function() {
    applyCurrencyOnKeyup();
});

function applyCurrencyOnKeyup() {
    $('.currency').on('keyup', function() {
        if($(this).val().indexOf('$') == -1) {
            $(this).val('$'+$(this).val()); 
        }
    });
}

将$(document).ready()重写为$(document).on()。

$(document).on("keyup", ".currency", function() {
    if($(this).val().indexOf('$') == -1) {
        $(this).val('$'+$(this).val()); 
    }
});

（不，不需要在准备好的文件中包装它）

表单验证失败后jQuery无法正常工作

1 个答案: