With a single step

~千里の道も一歩からと信じたいノート~

クライアントサイドのバリデート

今日はSAStrutsチュートリアルを使用して、クライアントサイドのバリデートを学ぶ。
JavaScriptを使用して、バリデートエラーを出力するらしい。
仕組みを理解するため、チュートリアルの説明を見てみる。。。
sastruts.seasar.org
ようわからんわ!
サイトに掲載されているチュートリアルの説明とソースが一致してないし!
どうなっとるんじゃ!!
ということで、本家のサイトは当てにせず、ソースを紐解いていく。

ソース

index.jsp
<%@page pageEncoding="UTF-8"%>
<html>
<head>
<title>Tutorial: Client Validator</title>
<link rel="stylesheet" type="text/css" href="${f:url('/css/sa.css')}" />
</head>
<body>

<h1>Tutorial: Client Validator</h1>

<html:errors/>

<s:form>
	<table>
		<tr><td>aaa</td><td><html:text property="aaa"/></td></tr>
		<tr><td>bbb</td><td><html:text property="bbb"/></td></tr>
	</table>
	<s:submit property="submit" clientValidate="true">aaaが必須</s:submit>
	<s:submit property="submit2" clientValidate="true">bbbが必須</s:submit>
</s:form>
</body>
</html>
ClientValidatorAction.java
package tutorial.action;

import javax.annotation.Resource;

import org.seasar.struts.annotation.ActionForm;
import org.seasar.struts.annotation.Execute;

import tutorial.form.ClientValidatorForm;

public class ClientValidatorAction {

	@ActionForm
	@Resource
	protected ClientValidatorForm clientValidatorForm;

	@Execute(validator = false)
	public String index() {
		return "index.jsp";
	}

	@Execute(input = "index.jsp")
	public String submit() {
		return "index.jsp";
	}

	@Execute(input = "index.jsp")
	public String submit2() {
		return "index.jsp";
	}
}
ClientValidatorForm.java
package tutorial.form;

import org.seasar.struts.annotation.Required;

public class ClientValidatorForm {

	@Required(target = "submit")
	public String aaa;

	@Required(target = "submit2")
	public String bbb;
}

今日の初めて

・html:javascript タグ

・s:submit タグ

学習点

どうやらs:sbumitタグのclientValidate属性をtrueにすることで、普段はhtml:errorsタグを使用した箇所に出力されるバリデートエラーの内容を、JavaScriptのアラート表示的に出力できるらしい。
これがクライアントサイドでのバリデートを行うかどうかのトリガーになる模様。
ただしトリガーを指定しても、html:javascriptタグを指定していないと、普段通りの赤文字でのバリデートエラーが表示される。
html:javascriptタグを指定することで初めて、アラート表示でバリデートエラーの内容をアラート的に表示できる。

まとめ

・s:sbumitタグclientValidate属性の指定とhtml:javascriptタグはセットで使用する。
・s:sbumitタグclientValidate属性はクライアントサイドのバリデートのトリガー。
・html:javascriptタグを指定しないと、アラート表示されない。