JSFでjavascriptを使用するクライアント側の検証

Question

私はJSF 2.0とPrimeFacesライブラリを使用しています。私はいくつかの入力を持つページを持っています（その中に2つのp：カレンダーコンポーネントがあります）。 2番目の日付が最初の日付より前でないことを検証したいが、この検証をクライアントで行い、検証が失敗した場合は、フォームを送信せず、カレンダーに属するh：メッセージを表示しない。 PrimeFacesのカレンダーにはminDate属性がありますが、これはグラフィカルカレンダーを使用して前の日付を選択することはできませんが、前の日付と検証パスを入力することはできます。だから私もjavascriptを使用する必要があります。 "onclick"イベントをcommandButonに追加して、検証を実行するjs関数を呼び出すことができますが、JSFがフォームを送信しないようにするにはjavascriptの検証に失敗しましたか？どのようにして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 "フォームID" とHTMLFormElementを持って言う： <フォームID = "フォームID" > ... < /フォーム>

イベントを停止するためには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（ 'フォームID'）の提出イベントのイベントハンドラとして、上記の機能を割り当てる。のaddEventListener（ '送信'、checkSubmit、偽） ;

希望これは、私はちょうどそれをテストするために、常にfalseを返すのJS関数を試みたが、動作するようには思えない、フォームがとにかく提出され