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

会生成这样的输出：

enter image description here

有点： - ）

在您的情况下，尝试直接从按钮的attr：

调用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');
        }   
   });
}

使用jsf jquery的必需字段动画

1 个答案: