多个 onClick 事件

Question

我有一个 JSF 页面，这是一个从服务中获取值的下拉菜单。 默认为“从下拉列表中选择”以及一个 datePicker 和一个提交按钮。

我需要在这里应用 JS/AJAX 验证。

如果用户在未从下拉列表和日期中选择任何值的情况下单击提交按钮。它应该首先显示一条消息，

1) 如果没有选择，首先显示一条消息 - 请从下拉列表中选择一个值。

2) 如果从下拉列表中选择了值并且尚未选择日期，则应显示一条消息“选择日期”。

3) 如果选择了日期且未从下拉列表中选择值，则应显示一条消息“从下拉列表中选择一个值”。

这两个验证都应该通过单击提交按钮来完成。

目前它只是检查是否未选择日期。 onclick 事件代码如下所述。

下拉

<h:selectOneMenu id="valueList" value="#bean.values">
    <f:selectItem itemValue="Select Action" itemLabel="Select Action" />
    <f:selectItems value="#{sampleService.sampleMethod}"
    var="SampleVar" itemValue="#{SampleVar}"
    itemLabel="#{SampleVar}">
    </f:selectItems>
</h:selectOneMenu>

提交按钮

  <ui:define name="actions">

----h:inputHidden id="getAllDates"
value="#{serviceMethod.getAllDates}"-----
    <h:commandButton styleClass="inputbutton" valuGenerate" id="export"
    action="#{generate.someReport}" onclick="saveDate(); />
   </ui:define>

以隐藏的方式传递所有选定的日期。 OnClick 事件 这个js函数写在另一个文件里。

onclick="saveDate();"

function saveDate() {
    var dates = $('#selectDates').datepick('getDate');
    var datesValue = '';
    if(dates==null || dates=="undefined"){
    alert("Select Dates");
    return false;
    }
    if(dates!=null){
//    store in an array and return true
    }

当前页面在每次单击提交按钮时都会刷新，并且仅显示日期的警报消息。

谁能帮我在提交按钮上应用 ajax 调用并显示验证消息？

Answer 1

您在 JavaScript 方向上想的太多了。使用 JSF 提供的设施。使用required 属性指定所需的输入。使用requiredMessage 属性指定验证消息。使用<h:message> 显示验证消息。使用<f:ajax> 通过ajax 提交（和验证）数据。

所以，应该这样做：

<h:selectOneMenu id="action" binding="#{action}" value="#{bean.action}" required="true" requiredMessage="Please select action">
    <f:selectItem itemValue="#{null}" itemLabel="Select Action" />
    <f:selectItems value="#{bean.actions}" />
    <f:ajax execute="@this" render="actionMessage date" />
</h:selectOneMenu>
<h:message id="actionMessage" for="action" />

<x:yourDatePickerComponent id="date" value="#{bean.date}" required="#{not empty action.value}" requiredMessage="Please select date">
    <f:ajax execute="@this" render="dateMessage" />
</x:yourDatePickerComponent>
<h:message id="dateMessage" for="date" />

（我不知道您将哪个组件用作日期选择器，只需相应地替换 x:yourDatePickerComponent）

Answer 2

你不需要 ajax：

    function save() {
    var validated = true;
    var dates = $('#selectDates').datepick('getDate');
    var datesValue = '';

    var message;
    if(dates==null || dates=="undefined"){
        alert("Select Dates");
        message = "message1";
        validated = false;
        return false;
    }

    if( $('#idOfDropDown').val() != ''){
        message = "message2";
        validated = false;
        return false;
    }

    if(!validated){
        // preveent thr form from submitting
        return false;
    }
}