Menjelajahi Pustaka Tag Formulir SpringMVC

1. Ikhtisar

Di artikel pertama seri ini kami memperkenalkan penggunaan pustaka tag formulir dan cara mengikat data ke pengontrol.

Dalam artikel ini, kami akan membahas berbagai tag yang disediakan Spring MVC untuk membantu kami membuat dan memvalidasi formulir .

2. Tag masukan

Kami akan mulai dengan tag masukan . Tag ini merender tag input HTML menggunakan nilai terikat dan type = 'text' secara default:

Mulai Spring 3.1 Anda dapat menggunakan jenis khusus HTML5 lainnya, seperti email, tanggal, dan lainnya. Misalnya jika kita ingin membuat field email, kita bisa menggunakan type = 'email':

Demikian pula, untuk membuat bidang tanggal, kita dapat menggunakan type = 'date' , yang akan membuat pemilih tanggal di banyak browser yang kompatibel dengan HTML5:

3. Tag kata sandi

Tag ini merender tag input HTML dengan type = 'password' menggunakan nilai terikat. Input HTML ini menutupi nilai yang diketik ke dalam bidang:

4. Tag textarea

Tag ini merender textarea HTML :

Kita dapat menentukan jumlah baris dan kolom dengan cara yang sama seperti yang kita lakukan pada area teks HTML .

5. Kotak centang Tag dan kotak centang

The checkbox tag merender HTML masukan tag dengan jenis = 'kotak centang' . Pustaka tag formulir Spring MVC menyediakan pendekatan berbeda untuk tag kotak centang yang harus memenuhi semua kebutuhan kotak centang kami :

Contoh di atas menghasilkan kotak centang tunggal klasik , dengan nilai boolean . Jika kita menyetel nilai terikat ke true , kotak centang ini akan dicentang secara default.

Contoh berikut menghasilkan beberapa kotak centang . Dalam kasus ini, nilai kotak centang di -hardcode di dalam halaman JSP:

Bird watching:  Astronomy:  Snowboarding: 

Di sini, nilai terikat adalah tipe array atau java.util.Collection :

String[] hobbies;

Tujuan dari tag kotak centang digunakan untuk merender beberapa kotak centang, di mana nilai kotak centang dibuat saat runtime:

Untuk menghasilkan nilai yang kita berikan dalam Array , List atau Map yang berisi opsi yang tersedia di properti items . Kita bisa menginisialisasi nilai kita di dalam controller:

List favouriteLanguageItem = new ArrayList(); favouriteLanguageItem.add("Java"); favouriteLanguageItem.add("C++"); favouriteLanguageItem.add("Perl");

Biasanya properti terikat adalah kumpulan sehingga dapat menampung beberapa nilai yang dipilih oleh pengguna:

List favouriteLanguage;

6. radiobutton dan tombol radio Tag

Tag ini merender tag input HTML dengan type = 'radio':

Male:  Female: 

Pola penggunaan tipikal akan melibatkan beberapa contoh tag dengan nilai berbeda yang terikat ke properti yang sama:

private String sex;

Sama seperti tag kotak centang , tag radiobuttons merender beberapa tag input HTML dengan type = 'radio' :

Dalam kasus ini, kami mungkin ingin meneruskan opsi yang tersedia sebagai Array , Daftar atau Peta yang berisi opsi yang tersedia di properti items :

List jobItem = new ArrayList(); jobItem.add("Full time"); jobItem.add("Part time");

7. Pilih Tag

Tag ini merender elemen pemilihan HTML :

Untuk menghasilkan nilai yang kita berikan dalam Array , List atau Map yang berisi opsi yang tersedia di properti items . Sekali lagi, kita bisa menginisialisasi nilai kita di dalam controller:

Map countryItems = new LinkedHashMap(); countryItems.put("US", "United States"); countryItems.put("IT", "Italy"); countryItems.put("UK", "United Kingdom"); countryItems.put("FR", "France");

Tag pemilihan juga mendukung penggunaan opsi bersarang dan tag opsi .

Sementara tag opsi merender satu opsi HTML , tag opsi merender daftar tag opsi HTML .

The pilihan tag mengambil Array , sebuah Daftar atau Peta yang berisi pilihan yang tersedia di item properti, seperti pilih tag:

Ketika kita memiliki kebutuhan untuk memilih beberapa item sekaligus, kita dapat membuat kotak daftar berganda. Untuk merender jenis daftar ini, cukup tambahkan atribut multiple = "true" di tag pemilihan .

Di sini properti terikat adalah array atau java.util.Collection :

List fruit;

8. Tag tersembunyi

Tag ini merender tag input HTML dengan type = 'hidden' menggunakan nilai terikat:

9. Tag Kesalahan

Pesan kesalahan lapangan dibuat oleh validator yang terkait dengan pengontrol. Kita dapat menggunakan Tag Kesalahan untuk membuat pesan kesalahan bidang tersebut:

This will display errors for the field specified in the path property. The error messages are rendered within a span tag by default, with .errors appended to the path value as the id, and optionally a CSS class from the cssClass property, which can be used to style the output:

Name is required!

To enclose the error messages with a different element instead of the default span tag, we can specify the preferred element inside the element attribute:

This renders the error messages within a div element:

 Name is required! 

I n addition to having the capability to show errors for a specific input element , we can display the entire list of errors (regardless of field) for a given page. This is achieved by the use of the wildcard *:

9.1. The Validator

To display errors for a given field we need to define a validator:

public class PersonValidator implements Validator { @Override public boolean supports(Class clazz) { return Person.class.isAssignableFrom(clazz); } @Override public void validate(Object obj, Errors errors) { ValidationUtils.rejectIfEmptyOrWhitespace(errors, "name", "required.name"); } }

In this case, if the field name is empty, the validator returns the error message identified by required.name from the resource bundle.

The resource bundle is defined in the Spring XML configuration file as follows:

Or in a pure Java configuration style:

@Bean public MessageSource messageSource() { ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource(); messageSource.setBasenames("messages"); return messageSource; }

The error message is defined inside the messages.properties file:

required.name = Name is required!

To apply this validation, we need to include a reference to the validator in our controller and call the method validate in the controller method which is called when user submits the form:

@RequestMapping(value = "/addPerson", method = RequestMethod.POST) public String submit( @ModelAttribute("person") Person person, BindingResult result, ModelMap modelMap) { validator.validate(person, result); if (result.hasErrors()) { return "personForm"; } modelMap.addAttribute("person", person); return "personView"; }

9.2. JSR 303 Bean Validation

Starting from Spring 3, we can use JSR 303 (via the @Valid annotation) for bean validation. To do this we need a JSR303 validator framework on the classpath. We will use the Hibernate Validator (the reference implementation). Following is the dependency that we need to include in the POM:

 org.hibernate hibernate-validator 5.1.1.Final 

To make Spring MVC support JSR 303 validation via the @Valid annotation, we need to enable the following in our Spring configuration file:

Or use the corresponding annotation @EnableWebMvc in a Java configuration:

@EnableWebMvc @Configuration public class ClientWebConfigJava implements WebMvcConfigurer { // All web configuration will go here }

Next, we need to annotate the controller method that we want to validate with the @Valid annotation:

@RequestMapping(value = "/addPerson", method = RequestMethod.POST) public String submit( @Valid @ModelAttribute("person") Person person, BindingResult result, ModelMap modelMap) { if(result.hasErrors()) { return "personForm"; } modelMap.addAttribute("person", person); return "personView"; }

Now we can annotate the entity's property to validate it with Hibernate validator annotation:

@NotEmpty private String password;

By default, this annotation will display “may not be empty” if we leave the password input field empty.

We can override the default error message by creating a property in the resource bundle defined in the validator example. The key of the message follows the rule AnnotationName.entity.fieldname:

NotEmpty.person.password = Password is required!

10. Conclusion

In this tutorial we explored the various tags that Spring provides for working with forms.

Kami juga telah melihat tag untuk tampilan kesalahan validasi dan konfigurasi yang diperlukan untuk menampilkan pesan kesalahan khusus.

Semua contoh di atas dapat ditemukan di proyek GitHub. Ini adalah proyek berbasis Eclipse, jadi semestinya mudah untuk mengimpor dan menjalankannya apa adanya.

Ketika proyek berjalan secara lokal, contoh formulir dapat diakses di:

// localhost: 8080 / spring-mvc-xml / person