Client side validation using javascript with JSF

Question

I'm using JSF 2.0 and PrimeFaces library. I have a page with several inputs (among them there are 2 p:calendar components). I want to validate that the second date is not before the first date, but I want this validation to happen in the client, and if validation fails, then don't submit the form and display the h:message that belong to the calendars. PrimeFaces' calendar has a minDate attribute, but this just works not allowing to choose a previous date using the graphical calendar, but you can still type a previous date and validation passes; so I have to use javascript too. I can add a "onclick" event to the commandButon to call js function that performs validation, but how can I stop JSF from submitting the form is javascript validation failed? and how can I display the h:message components? I want to avoid going to the server. Thanks!

This is the code of the calendars:

<p:calendar id="dateFrom" value="#{reqAbsences.dateFrom}" 
            navigator="true" showOn="button" 
            required="true" pattern="dd/MM/yyyy" 
            onSelectUpdate="dateTo dateFromVal hourInput timeFrom timeTo"
            selectListener="#{reqAbsences.handleDateFromSelect}"
            mindate="#{reqAbsences.today}" >
                  <f:validator validatorId="DateValidator"/>
</p:calendar>
<p:message id="dateFromVal" for="dateFrom" showSummary="false"/>
<h:outputLabel value="#{text['global.toDate']}"/>
<p:calendar id="dateTo" value="#{reqAbsences.dateTo}" 
            navigator="true" showOn="button"
            onSelectUpdate="dateToVal"
            selectListener="#{reqAbsences.handleDateToSelect}"
            pattern="dd/MM/yyyy" required="true" mindate="#{reqAbsences.dateFrom}">
                   <f:validator validatorId="DateValidator"/>
</p:calendar>
<p:message id="dateToVal" for="dateTo" showSummary="false"/>

Maddy · Accepted Answer · 2011-07-14 10:51:20Z

1

Simply, Your JavaScript method must return true when the validation succeeds. else it has to return false.

function compareDates()
{
  var validDates=true; 
   /*Write your logic to compare your dates
      */
if(validDates) return true;
else return false;
}

when it returns false your form wont be submitted to server.

edited Jul 14, 2011 at 10:51

answered Jul 14, 2011 at 4:30

Maddy

3,8169 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

damian Over a year ago

I tried a js function that returns false always just to test it, and doesn't seem to work, the form is submitted anyways. I tried calling the js from the onclick property of a commandButton and also from the onsubmit property of a h:form. Where should I call the js from?

Maddy Over a year ago

you can call from anywhere onclick="return compareDates();"

Eran · Accepted Answer · 2013-03-05 19:11:53Z

1

Say we have an HTMLFormElement with id "formId", i.e: <form id="formId">...</form>

The formal way to use JavaScript & DOM to stop an event is to call the event object's "preventDefault" method (or set its returnValue property to false, depending on the browser).

Example:

function checkSubmit(e) { var ev = e || window.event;

if (needs to cancel submit) {
    if (ev.preventDefault) {
        ev.preventDefault();
    }
    ev.returnValue = false;
    return false;
}

} /* Allocating the above function as an event handler of the submit event of the above form element */ document.getElementById('formId').addEventListener('submit', checkSubmit, false);

Hope this helps

answered Mar 5, 2013 at 19:11

Eran

111 bronze badge

Collectives™ on Stack Overflow

Client side validation using javascript with JSF

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related