Wicket フォームデータの検証

2024-04-192024
30% (109.8/366)
April
62.8% (18.8/30)
Week 16
69.3% (4.8/7)
Day 19 Fri
85.3% (20.4/24)

訪問者

total: 12355
today: 7
yesterday: 7
now: 8

↑

更新

MenuBar

はじめに
ValidationExamPage.html
ValidationExamVo.java
ValidationExamPage.java
- Place Holder の利用
- 入力検証エラーの発生元をはっきりさせたい
Date型として適切でないものが入力されても大丈夫

はじめに †

こんなふうに、入力項目のチェックを行いたい

↑

ValidationExamPage?.html †

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:wicket="http://wicket.apache.org/">
<head>
<title>Wicket Validation Examination Homepage</title>
</head>
<body>
<strong>Wicket Validation Examination Homepage</strong>
<br />
<br />
<span wicket:id="msg"> error message will be here </span>
<form wicket:id="f">
	Start : <input type="text" wicket:id="start" size="20" />
	End : <input type="text" wicket:id="end" size="20" /> <br />
	<input type="submit" value="POST" />
</form>
</body>
</html>

エラー表示領域 <span wicket:id="msg"> を作る
入力項目は、<form wicket:id="f"> 以下に、<input type="text" wicket:id="start" size="20" /> と、<input type="text" wicket:id="end" size="20" /> の二つ
POST ボタンを押したときに start > end だと、その旨エラーを表示したい。

↑

ValidationExamVo?.java †

package com.snail;

import java.io.Serializable;
import java.util.Date;

public class ValidationExamVo implements Serializable{
  private static final long serialVersionUID = 8118905069882346381L;
  public static final String START = "start";
  public static final String END = "end";
  private Date start;
  private Date end;
  public Date getStart() {
    return start;
  }
  public void setStart(Date start) {
    this.start = start;
  }
  public Date getEnd() {
    return end;
  }
  public void setEnd(Date end) {
    this.end = end;
  }
}

HTML の wicket:id に合わせたフィールド名 (getter/setter) にする。
ValidationExamPage?.java で、CompoundPropertyModel? を使うため。
Serializable を実装するのを忘れずに

↑

ValidationExamPage?.java †

package com.snail;

import org.apache.wicket.extensions.markup.html.form.DateTextField;
import org.apache.wicket.extensions.yui.calendar.DatePicker;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.CompoundPropertyModel;

public class ValidationExamPage extends WebPage {
  private static final long serialVersionUID = 5261959667681075067L;

  private FeedbackPanel feedback = new FeedbackPanel("msg");

  private ValidationExamVo vo = new ValidationExamVo();

  private Form form = new Form("f", new CompoundPropertyModel(vo)) {
      private static final long serialVersionUID = 8219220062798577531L;

      @Override
      protected void onSubmit() {
        if(vo.getStart().after(vo.getEnd())){
          error("Startは、Endよりも前です");
        }
      }
    };

  public ValidationExamPage() {
    add(form);
    add(feedback);

    DateTextField start = new DateTextField(ValidationExamVo.START);
    start.setRequired(true);
    start.add(new DatePicker());
    form.add(start);

    DateTextField end = new DateTextField(ValidationExamVo.END);
    end.setRequired(true);
    end.add(new DatePicker());
    form.add(end);
  }
}

Form#onSubmit() で、入力項目の検証を行い、エラーが有れば Form#error() で表示する

↑

Place Holder の利用 †

Form#error() では、Place Holder を利用することもできる

  private Form form = new Form("f", new CompoundPropertyModel(vo)) {
      private static final long serialVersionUID = 8219220062798577531L;

      @Override
      protected void onSubmit() {
        if(vo.getStart().after(vo.getEnd())){
          Map<String,String> err = new HashMap<String,String>();
          err.put("start",vo.getStart().toString());
          err.put("end",vo.getEnd().toString());

          error("${start} は ${end} よりも前",err);
        }
      }
    };

こんな感じになる

↑

入力検証エラーの発生元をはっきりさせたい †

入力検証エラーの色を変えたいときなど

Form#onSubmit() で、Form#error() の代わりに、TextFiled?#error() を使ってエラーを発生させる

package com.snail;

import java.util.HashMap;
import java.util.Map;

import org.apache.wicket.extensions.markup.html.form.DateTextField;
import org.apache.wicket.extensions.yui.calendar.DatePicker;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.CompoundPropertyModel;

public class ValidationExamPage extends WebPage {
  private static final long serialVersionUID = 5261959667681075067L;

  private FeedbackPanel feedback = new FeedbackPanel("msg");

  private ValidationExamVo vo = new ValidationExamVo();

  private DateTextField startTextField = new DateTextField(ValidationExamVo.START);

  private DateTextField endTextField = new DateTextField(ValidationExamVo.END);

  private Form form = new Form("f", new CompoundPropertyModel(vo)) {
      private static final long serialVersionUID = 8219220062798577531L;

      @Override
      protected void onSubmit() {
        if(vo.getStart().after(vo.getEnd())){
          Map<String,String> err = new HashMap<String,String>();
          err.put("start",vo.getStart().toString());
          err.put("end",vo.getEnd().toString());

          startTextField.error("START は、"+vo.getEnd()+"より前");
          endTextField.error("ENDは、"+vo.getStart()+"より後ろ");
          
        }
      }
    };
  
  public ValidationExamPage() {
    add(form);
    add(feedback);
    
    startTextField.setRequired(true);
    startTextField.add(new DatePicker());
    form.add(startTextField);
    
    endTextField.setRequired(true);
    endTextField.add(new DatePicker());
    form.add(endTextField);
  }
}