使用jsf jquery的必填字段动画

Question

我正在创建一个 JSF 表单并想要一个功能，当用户单击提交按钮时，如果所有必填字段为空白，则所有必填字段都应显示为红色边框。 这是 JSF 表单：

<a4j:outputPanel id="add-milestone-panel"> 
                            <script type="text/javascript" src="./scripts/armms.js"/>
                            <script>
                        getDatePickerForRangeWithFormat('milestoneStartDate', 'milestoneEndDate');</script>

                            <!--            <h:messages style="color: red;"></h:messages>-->
                            <table>
                                <tr>
                                    <td>Project name:<abbr style="color: red;font-size: 150%" title="required">*</abbr></td>
                                    <td>
                                        <h:selectOneMenu id="projectID" class="required" style="width: 200px" value="#{projectMilestoneDataBean.projectId}" required="true" requiredMessage="#{msg.project_id_required}">
                                            <f:selectItem itemLabel="-----Select-----" itemValue="#{null}" />
                                            <f:selectItems  value="#{systemResultViewUtil.projectNames}" var="projects" itemValue="#{projects.projectId}" itemLabel="#{projects.projectName}" />
                                            <f:ajax event="blur" render="projectIDErr" />
                                        </h:selectOneMenu>
                                        <br/>
                                        <h:message id="projectIDErr" for="projectID" style="color: red"/>
                                    </td>

                                </tr>
                                <tr>
                                    <td>Name:<abbr style="color: red;font-size: 150%" title="required">*</abbr></td>
                                    <td>
                                        <h:inputText id="milestoneName" class="required" style="width: 200px" value="#{projectMilestoneDataBean.milestoneName}" required="true" requiredMessage="#{msg.milestone_name_required}" >
                                            <f:ajax event="blur" render="milestoneNameErr" />
                                        </h:inputText>
                                        <br/>
                                        <h:message id="milestoneNameErr" for="milestoneName" style="color: red"/>
                                    </td>

                                </tr>

                                <tr>
                                    <td>Description:</td>
                                    <td>
                                        <h:inputTextarea id="milestoneDesc" value="#{projectMilestoneDataBean.milestoneDesc}" style="width: 200px" rows="5" cols="10"/>
                                        <br/>
                                    </td>
                                </tr>

                                <tr>
                                    <td>Start date<abbr style="color: red;font-size: 150%" title="required">*</abbr></td>
                                    <td>
                                        <h:inputText id="milestoneStartDate" class="required" style="width: 200px" value="#{projectMilestoneDataBean.milestoneStartDate}" required="true" requiredMessage="#{msg.start_date}">
                                            <f:convertDateTime type="date" pattern="dd-MM-yyyy" dateStyle="dd-MM-yyyy"/>
                                        </h:inputText>
                                        <br/>
                                        <h:message id="milestoneStartDateErr" for="milestoneStartDate" style="color: red"/>
                                    </td>
                                </tr>

                                <tr>

                                    <tr>
                                        <td>Estimated End Date<abbr style="color: red;font-size: 150%" title="required">*</abbr></td>
                                        <td>
                                            <h:inputText id="milestoneEndDate" class="required" style="width: 200px"  value="#{projectMilestoneDataBean.milestoneEndDate}" required="true" requiredMessage="#{msg.end_date}">
                                                <f:convertDateTime type="date" pattern="dd-MM-yyyy" dateStyle="dd-MM-yyyy"/>

                                            </h:inputText>
                                            <br/>
                                            <h:message id="milestoneEndDateErr" for="milestoneEndDate" style="color: red"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" style="padding-left: 150px;">
                                            <br/>
                                            <h:panelGrid columns="2">
                                                <a4j:commandButton styleClass="mybutton" action="#{projectMilestoneServiceBean.addProjectMilestone()}"  oncomplete="if(#{messageDataBean.isSuccess != null and messageDataBean.isSuccess}){#{rich:component('add-milestone-popup')}.hide();}"  render="add-milestone-panel,projectMilestoneService,status,notificationMessage" value="Add"/>
                                                <a4j:commandButton styleClass="mybutton" value="Cancel" style="text-decoration: none" onclick="#{rich:component('add-milestone-popup')}.hide(); return false;"/>
                                            </h:panelGrid>
                                        </td>
                                    </tr>
                                </tr>
                            </table>
                        </a4j:outputPanel>

这是我管理 css 的 jquery：

$(document).ready(function() {
    $ = jQuery;

    $(":input.required").blur(function() {
        comp(this);
    });
    $(":input.required").keyup(function() {
        comp(this);
    });
    $(":input.required").click(function() {
        comp(this);
    });
    function comp(a) {
        if ($(a).val() !== "") {

            $(a).css({
            "border-top-color": "#ccc",
            "border-right-color": "#ccc",
            "border-bottom-color": "#ccc",
            "border-left-color": "#ccc",
            "border": "1px solid #ccc !important"
        });
    }
    else {
        $(a).css({
            "border-top-color": "red",
            "border-right-color": "red",
            "border-bottom-color": "red",
            "border-left-color": "red",
            "border": "1px solid #FF0000 !important"
        });
    }
  }
  $(".mybutton").live('click', function() {
        $(":input.required").each(function() {
        comp(this);
  });
 });
});

我的问题是，当我点击提交按钮时，它会将所有必填字段变为红色空白几毫秒，然后将其更改回原始状态。

我认为，我正在从提交按钮渲染弹出面板，因此在调用 jquery 函数面板后正在渲染，因此它会恢复其原始状态。

提前感谢您的帮助。

Answer 1

我知道它不能直接回答您的问题，但如果您碰巧使用 Primefaces，那么这样的功能就会开箱即用。 Primefaces 将ui-state-error 类附加到未验证的输入字段。所以这样的代码：

<p:inputText id="milestoneName" value="#{projectMilestoneDataBean.milestoneName}"
                         required="true" requiredMessage="#{msg.milestone_name_required}" >
<h:message id="milestoneNameErr" for="milestoneName" />

CSS：

input.ui-state-error {
    border: 1px solid #B94A48;
    color: #B94A48;
}

会产生这样的输出：

种类:-)

---

在您的情况下，尝试直接从按钮的属性调用 jQuery 验证函数：

XHTML

<h:inputText styleClass="input-to-validate" ... >
<a4j:commandButton oncomplete="validateAllInputs(); ...." ...>

JavaScipt

function validateAllInputs() {
    $('input.input-to-validate').each(function(){
       var input = $(this);
       if (!input.val() || input.val() == "") {
            input.addClass('ui-state-error');
        } else {
            input.removeClass('ui-state-error');
        }   
   });
}