Postbackする前にクライアント側で検証する方法

検証用コントロールを使用しても、必要でない処までエラー検証する場合や、コントロールの機能だけでは不十分な場合もあります。むしろそのほうが多いような印象を持っています。そこで事前にクライアントサイドで検証させ、正しいものをサーバーサイドにリクエストするようにさせる方法です。

具体的な方法として、Formの部品(コントロール)にOnClientClickの属性を設定します。あとはクライアント側にOnClientClickで指定したJavascriptのメゾットを定義します。検証した結果、ポストしてもよい場合はTrueを、そうではない場合はFalseを返してあげます。

デザイン画面

<form id="form1" runat="server">
    <div>
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      <br />
      <asp:LinkButton ID="Submit" runat="server" OnClientClick="BeforeSubmit_Check();">Submit</asp:LinkButton>
    </div>
</form>

JavaScript

function BeforeSubmit_Check() {
   var node = document.getElementById("TextBox1");
   if (node.value.length == 0)
   { alert("入力されていません"); return false; }
   return true;
}