使用JSF進行客戶端驗證使用JSF

我正在使用JSF 2.0和PrimeFaces庫。我有一個頁面有幾個輸入（其中有2個p：日曆組件）。我想驗證第二個日期不在第一個日期之前，但我希望驗證發生在客戶端，如果驗證失敗，則不要提交表單並顯示屬於日曆的h：消息。 PrimeFaces的日曆有一個minDate屬性，但這只是不允許使用圖形日曆選擇以前的日期，但仍然可以鍵入以前的日期和驗證通過;所以我也必須使用JavaScript。我可以添加一個「onclick」事件給commandButon來調用執行驗證的js函數，但是如何阻止JSF提交表單是JavaScript驗證失敗？以及如何顯示h：消息組件？我想避免去服務器。謝謝！使用JSF進行客戶端驗證使用JSF

這是日曆的代碼：

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

來源

2011-07-13 Damian

簡單地說，當驗證成功你的JavaScript方法必須返回true。否則它必須返回false。

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

當它返回false您的表單不會被提交給服務器。

來源

2011-07-14 04:30:08 Maddy

我想，返回false始終只是爲了測試它的JS功能，似乎並沒有工作，形式反正提交。我嘗試從commandButton的onclick屬性和h：form的onsubmit屬性中調用js。我應該從哪裏打電話給js？ – Damian

你可以從任何地方打電話onclick =「return compareDates（）;」 – Maddy

感謝@madhu！這樣可行 – Damian

說我們有ID爲「formId」的HTMLFormElement，即： <形式ID = 「formId」 > ... < /形式>

使用JavaScript & DOM停止正規途徑的事件調用事件對象的「preventDefault」方法（或根據瀏覽器將其returnValue屬性設置爲false）。

實施例：

功能checkSubmit（E）{ VAR EV = E || window.event;

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

} /*分配上述功能作爲上述形式元素*/ 的document.getElementById（ 'formId'）的提交的事件的事件處理程序。的addEventListener（ '提交'，checkSubmit，假） ;

希望這有助於

來源

2013-03-05 19:11:53 Eran

使用JSF進行客戶端驗證使用JSF

回答

相關問題