Несколько событий onClick

Question

У меня есть страница JSF, раскрывающийся список, где значения извлекаются из службы.По умолчанию это «Выбрать из выпадающего списка», указатель даты и кнопка отправки.

Мне нужно применить проверку 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;
    }
}