妥当性検査エラーをリストとして出力

Code snippet 1 - validation.js
 
/**
 * Change the method of displaying errors from alert box to 
 * output to an unordered list (<ul>).
 * @param btnSubmit id of a button that submits a form
 * @param ulId id of a ul where errors will be displayed
 */
function errorOutputUL(btnSubmit, ulId) {
  // enable validation of all fields
  XSP.validateAllFields = true;
  // change the function that displays an error  
  XSP.validationError = function(clientId, message) {
    // add class to ul
      dojo.addClass(ulId, "xspMessage");
      // add li with a message
      dojo.byId(ulId).innerHTML = dojo.byId(ulId).innerHTML + "<li>" + message + "</li>"; 
  };
  // clear old errors on submit 
  dojo.connect(dojo.byId(btnSubmit), "onclick", null, function() {
    dojo.byId(ulId).innerHTML = "";
    dojo.removeClass(ulId, "xspMessage");
  });
}
 
 
 
 
Code snippet 2 - XPage
 
  <xp:this.resources>
    <xp:script src="/validation.js" clientSide="true" />
  </xp:this.resources>
 
  <xp:table>
 
...
fields to validate
...
 
    <xp:tr>
      <xp:td></xp:td>
      <xp:td>
        <xp:messages style="color:red" id="messages1"></xp:messages>
        <ul id="errors" style="color:red"></ul>
      </xp:td>
    </xp:tr>
    <xp:tr>
      <xp:td></xp:td>
      <xp:td>
        <xp:button value="Submit" id="btnSubmit">
          <xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true" id="eventHandler1" />
        </xp:button>
      </xp:td>
    </xp:tr>
  </xp:table>
 
  <xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[dojo.ready(function() {
  errorOutputUL("#{id:btnSubmit}", "errors");
});
]]></xp:this.value>
  </xp:scriptBlock>





クライアントサイドの妥当性検査エラーを警告ボックスから <ul>タグ付きのリストでページ上に表示するように変更できます。

1) validation.js へこの js をコピー
2) validation.js を XPage にロード
3) エラーリストの前に ul タグを追加
      <ul id="errors" style="color:red"></ul>
4) この XPage の最後に初期化のブロックを追加、btnSubmit はページを送信するボタンの id です。
<xp:scriptBlock id="scriptBlock1">
  <xp:this.value><![CDATA[dojo.ready(function() {
errorOutputUL("#{id:btnSubmit}", "errors");
});
]]></xp:this.value>
</xp:scriptBlock>

JavaScript (Client)
katoman
August 19, 2015 at 1:54 PM
Rating
0





No comments yetLogin first to comment...