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

你不需要阿賈克斯：

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