使用jsf jquery的必需字段动画-Java 学习之路

我正在创建一个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>
                                        

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

                                        <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"/>
                                        

                                    </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>
                                        

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

                                            <h:message id="milestoneEndDateErr" for="milestoneEndDate" style="color: red"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" style="padding-left: 150px;">
                                            

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

My problem is that when i click on submit button it turns all the required fields which is blank in red color for some milliseconds and changes it to original state back.

我想，我正在从提交按钮渲染弹出式面板，所以在调用jquery函数面板后渲染，以便它恢复原状 .

在此先感谢您的帮助 .

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

回复于 2024-05-13T05:17:16+08:00

使用jsf jquery的必需字段动画

1 回答

相关问题