使用javascript和JSF进行客户端验证

Question

我使用JSF 2.0和PrimeFaces库。我有一个包含几个输入的页面(其中有两个日历组件)。我想验证第二个日期是否在第一个日期之前，但我希望在客户机中进行验证，如果验证失败，则不要提交表单并显示属于日历的h:消息。PrimeFaces的日历有一个minDate属性，但这只是不允许使用图形日历选择以前的日期，但您仍然可以键入以前的日期并通过验证;所以我也得用javascript。我可以向命令按钮添加一个"onclick"事件来调用执行验证的js函数，但是如果javascript验证失败，我如何阻止JSF提交表单呢?以及如何显示h:消息组件?我想避免使用服务器。谢谢!

日历的代码:

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

Answer 1

简单地说，当验证成功时，JavaScript方法必须返回true。否则返回false

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

当

返回false时，您的表单将不会提交给服务器。

Answer 2

假设我们有一个id为"formId"的HTMLFormElement，即:& lt;形式id = " formId "在……& lt;/form>

使用JavaScript的正式方式&DOM停止事件的方法是调用事件对象的"preventDefault"方法(或者将其returnValue属性设置为false，具体取决于浏览器)。

的例子:

函数checkSubmit(e) {Var = e || window.event;

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

}/*将上述函数分配为上述表单元素的submit事件的事件处理程序*/. getelementbyid("formId")。addEventListener('submit'， checkSubmit, false);

希望能有所帮助