Can anyone give sample Java code for validating the HTML form (ex: form attributes not null, minimum and maximum size) using via Spring MVC and with thymeleaf-spring4 libraries?
The simplest, you annotate your dao object (in this case user), with the constraints you need:
#Entity
public class User
{
#Id
#GeneratedValue(strategy = GenerationType.AUTO)
private long id;
#NotNull
private String login;
#Size(min=2, max=30)
private String firstName;
#Min(18)
private int age;
}
These annotation are from javax.validation.constraints.
After this you need to modify your controller, you need to clarify your controller that the object must be #Valid:
#RequestMapping(method=RequestMethod.POST)
public String registerUser(#Valid final User user, final BindingResult bindingResult)
{
if (bindingResult.hasErrors()) {
return "form";
}
// Your code
return "redirect:/userList";
}
The errors are stored in the BindingResult.
Finally show the errors:
<span th:if="${#fields.hasErrors('login')}" th:errors="*{login}"></span>
Edit:
Return ModelAndView
#RequestMapping(method=RequestMethod.POST)
public ModelAndView registerUser(#Valid final User user, final BindingResult bindingResult)
{
if (bindingResult.hasErrors()) {
ModelAndView mav = new ModelAndView("form");
mav.addObject(bindingResult);
return mav;
}
}
These are latest maven dependencies for java validation API
1.dependency
groupId javax.validation
artifactId validation-api
version 1.1.0.Final
2.dependency
groupId org.hibernate
artifactId hibernate-validator
version 5.0.1.Final
Take a look at this:
First, comes the Object...
public class PruebaFormCommand {
#NotEmpty
#Size(min = 3, max = 50)
private String textoPrueba;
public String getTextoPrueba() {
return textoPrueba;
}
public void setTextoPrueba(String textoPrueba) {
this.textoPrueba = textoPrueba;
}
}
Then, the Controller:
#Controller
public class PruebaFormController {
#RequestMapping("/pruebaform")
public String pruebaForm(Model model){
model.addAttribute("pruebaFormCommand", new PruebaFormCommand());
return "pruebaform";
}
#RequestMapping(value = "/dopruebaform", method = RequestMethod.POST)
public String doPruebaForm(#Valid PruebaFormCommand pruebaFormCommand, BindingResult bindingResult){
if (bindingResult.hasErrors()) {
return "pruebaform";
}
return "pruebaformcomplete";
}
}
Then, the HTML:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<link href="../static/css/bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet" media="screen"
th:href="#{/css/bootstrap-3.3.4-dist/css/bootstrap.min.css}"/>
<script src="../static/js/jquery-2.1.4.min.js"
th:src="#{/js/jquery-2.1.4.min.js}"></script>
<link th:href="#{/css/custom.css}" rel="stylesheet" media="screen"/>
<title>Checkout</title>
</head>
<body>
<div class="container">
<h2>PRUEBA Form</h2>
<form class="form-horizontal" th:object="${pruebaFormCommand}" th:action="#{/dopruebaform}" method="post">
<div th:if="${#fields.hasErrors('*')}" class="alert alert-danger">
<p th:text="#{pruebaFormCommand.hasErrors}">Error Message</p>
</div>
<div class="form-group" th:class="${#fields.hasErrors('textoPrueba')} ? 'form-group has-error' : 'form-group'">
<label class="col-sm-2 control-label">Meteme algo payo:</label>
<div class="col-sm-10">
<input type="text" class="form-control" th:field="*{textoPrueba}" th:errorclass="has-error"/>
<span class="help-block" th:if="${#fields.hasErrors('textoPrueba')}">
<ul>
<li th:each="err : ${#fields.errors('textoPrueba')}" th:text="${err}" />
</ul>
</span>
</div>
</div>
<div class="row">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</body>
</html>
Finally, include your message.properties:
pruebaFormCommand.hasErrors=Porfa corrige los errores:
NotEmpty.pruebaFormCommand.textoPrueba={0} caracteres mínimo....
Size.pruebaFormCommand.textoPrueba={0} debe tener entre {2} y {1} caracteres
Related
I am new to springboot and thymeleaf and I'm trying to understand the form handling methods that interact with the code. Below you will find my html documents linked to a Users class. I am trying to change them to link to a customer class amongst other things, but anytime I change the th:object=${users} to match the new entity 'customerentity' it gives me the error below. What more do I have to do to get the bean(?) to register my new attribute? Any help or links to other answers is greatly appreciated.
java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name 'customerentity' available as request attribute
Here is my entity class
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import org.springframework.lang.NonNull;
#Entity
public class Users {
#Id
#GeneratedValue(strategy = GenerationType.AUTO)
private long id;
#NonNull
private String name;
#NonNull
private String email;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
// standard constructors / setters / getters / toString
}
The controller class
#Controller
public class UserController {
//set up a UserRepositoty variable
#Autowired
private UserRepository userRepository;
//create an UserRepository instance - instantiation (new) is done by Spring
public UserController(UserRepository userRepository) {
this.userRepository = userRepository;
}
//Mapping for the /index URL when initiated through Tomcat
#RequestMapping({"/index"})
public String showUserList(Model model) {
model.addAttribute("customers", userRepository.findAll());
return "index";
}
//Mapping for the /signup URL - calls the add-user HTML, to add a user
#RequestMapping({"/signup"})
public String showSignUpForm(Users user) {
return "add-user";
}
//Mapping for the /signup URL - to add a user
#RequestMapping({"/adduser"})
public String addUser(#Validated Users users, BindingResult result, Model model) {
if (result.hasErrors()) {
return "add-user";
}
userRepository.save(users);
return "redirect:/index";
}
//Mapping for the /edit/user URL to edit a user
#GetMapping("/edit/{id}")
public String showUpdateForm(#PathVariable("id") long id, Model model) {
Users user = userRepository.findById(id)
.orElseThrow(() -> new IllegalArgumentException("Invalid user Id:" + id));
model.addAttribute("customer", user);
return "update-user";
}
//Mapping for the /update/id URL to update a user
#PostMapping("/update/{id}")
public String updateUser(#PathVariable("id") long id, #Validated Users user,
BindingResult result, Model model) {
if (result.hasErrors()) {
user.setId(id);
return "update-user";
}
userRepository.save(user);
return "redirect:/index";
}
//Mapping for the /delete/id URL to delete a user
#GetMapping("/delete/{id}")
public String deleteUser(#PathVariable("id") long id, Model model) {
Users user = userRepository.findById(id)
.orElseThrow(() -> new IllegalArgumentException("Invalid user Id:" + id));
userRepository.delete(user);
return "redirect:/index";
}
}
The html documents
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Add User</title>
</head>
<body>
<form action="#" th:action="#{/adduser}" th:object="${users}" method="post">
<label for="name">Name</label>
<input type="text" th:field="*{name}" id="name" placeholder="Name">
<span th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></span>
<label for="email">Email</label>
<input type="text" th:field="*{email}" id="email" placeholder="Email">
<span th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></span>
<input type="submit" value="Add User">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Add User</title>
</head>
<body>
<div th:switch="${users}">
<h2 th:case="null">No users yet!</h2>
<div th:case="*">
<h2>Users</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${users}">
<td th:text="${user.name}"></td>
<td th:text="${user.email}"></td>
<td><a th:href="#{/edit/{id}(id=${user.id})}">Edit</a></td>
<td><a th:href="#{/delete/{id}(id=${user.id})}">Delete</a></td>
</tr>
</tbody>
</table>
</div>
<p>Add a new user</p>
</div>
</body>
</html>
I can't pass a object Project without the object is null.
How do I pass the object to the spring controller from the html?
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<form action="/addproject" method="POST">
<input type="hidden" name="project" th:value="${project}"/>
<input type="submit" value="Save Project" class="submit">
</form>
</body>
</html>
#Controller
public class ProjectController {
#GetMapping("/")
public String indexPage(Model model) {
model.addAttribute("project", new Project("Test", "Test"));
return "index";
}
#PostMapping("/addproject")
public String add(WebRequest webRequest) {
Project p = (Project) webRequest.getAttribute("project", WebRequest.SCOPE_REQUEST);
return "index";
}
}
Please check this article. In short you need to pass required object to ModelAndView, not Model:
#GetMapping("/")
public ModelAndView indexPage(Model model) {
ModelAndView mav = new ModelAndView("index");
mav.addObject("project", new Project("Test", "Test"));
return mav;
}
and access it by name from template:
<b th:text="${project.attribute}">Text ...</b>
I would suggest you to proceed with the document here first.
You don't have a requirement or problem with ModelAndView.
The first time you call the /project page, the project class information will be loaded by #GetMapping, if you want, it will be captured by #PostMapping when you change and submit it.
project.html file:
<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<title>Project Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Project Form</h1>
<form method="post" th:action="#{/project}" th:object="${project}">
<p>Name: <input type="text" th:field="*{name}" /></p>
<p>Description: <input type="text" th:field="*{description}" /></p>
<p><input type="submit" value="Submit" /> </p>
</form>
</body>
</html>
Project.java file:
public class Project {
private String name;
private String description;
public Project(String name, String description) {
this.name = name;
this.description = description;
}
// getter/setter ...
}
ProjectController.java file:
#Controller
public class ProjectController {
#GetMapping("/project")
public String greetingForm(Model model) {
model.addAttribute("project", new Project("PN1", "PD1"));
return "project";
}
#PostMapping("/project")
public String greetingSubmit(#ModelAttribute Project project, Model model) {
model.addAttribute("project", project);
return "project";
}
}
I am trying send the data through controller to html page but unable data transmission is getting failed. Control is redirecting to the desired page along with labels but form data is not reflecting in the view page.
***HomeController***
package com.example.demo.web;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import com.example.demo.domain.User;
#Controller
public class HomeController {
User user = new User();
#RequestMapping("/")
public String home(Model model) {
model.addAttribute("formData", user);
return "index";
}
#RequestMapping(value="/create", method=RequestMethod.POST)
public String processFormData(User user, RedirectAttributes attr) {
attr.addFlashAttribute("user",user);
return "redirect:display";
}
#RequestMapping(value="/display", method=RequestMethod.GET)
public String displayFormData(User user) {
return "result";
}
}
index.html
<!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8">
<title> Home Page </title>
</head>
<body>
<p> Enter Data Below </p>
<form action="/create" method="post" th:object="${formData}">
<p>Full Name:<input type="text" th:feild="${formData.fullName}"/></p>
<p>Age:<input type="text" th:feild="${formData.age}"/></p>
<p>Employed?<input type="checkbox" th:feild="${formData.employed}" th:value="true"/></p>
<p>Gender:</p>
<p>Male<input type="radio" th:feild="${formData.gender}" th:value="Male"/>
Female<input type="radio" th:feild="${formData.gender}" th:value="Female"/></p>
<p><input type="submit" value="Submit"/> <input type="reset" value="Reset"/></p>
</form>
</body>
</html>
result.html
<html xmlns:th="https://thymeleaf.org">
<table>
<tr>
<td><h4>User Name: </h4></td>
<td><h4 th:text="${user.fullName}"></h4></td>
</tr>
<tr>
<td><h4>Age: </h4></td>
<td><h4 th:text="${user.age}"></h4></td>
</tr>
</table>
</html>
The controller class sends and reads a form view. The User data is passed as a parameter to the processForm() handler. Spring tries to fill the bean with the request data. The data is also automatically available for the Thymeleaf result view. The #Controller annotation allows the implementation classes to be autodetected through the classpath scanning.
#Controller is typically used in combination with a #RequestMapping annotation used on request handling methods. I used the #GetMapping and ##PostMapping` as a shortcut to #RequestMapping(method = RequestMethod.POST)
#Controller
public class HomeController {
//This responds to localhost:8080/
#GetMapping("/")
public String sendForm(User user){
return "index";
}
//This responds to localhost:8080/
#PostMapping("/")
public String processForm(User user){
return "result";
}
User Class. This is the User class. It is automatically filled with data from the form request. The attributes must match the form fields. You should be able to see the matching attribute names in the template views below.
public class User {
private String fullName;
private int age;
private String occupation;
public String getFullName() {
return fullName;
}
public void setFullName(String name) {
this.fullName = name;
}
public String getOccupation() {
return occupation;
}
public void setOccupation(String occupation) {
this.occupation = occupation;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
index.html
The th:object refers to the user form bean. This is not a class name, but a Spring bean name; therefore it is in lowercase. With the *{} syntax, we refer to the defined object. In this case its the user object. I noticed that you misspelled th:field, this can also create bugs.
<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title></title>
</head>
<body>
<p> Enter Data Below </p>
<form th:action="#{/}" th:object="${user}" method="post">
<p>Full Name:<input type="text" th:field="*{fullName}" id="fullName" name="fullname" autofocus="autofocus"></p>
<p>Age:<input type="number" th:field="*{age}" id="age" name="age" autofocus="autofocus" /></p>
<p><input type="submit" value="Submit"/> <input type="reset" value="Reset"/></p>
</form>
</body>
</html>
result.html
We identify the form attributes with the ${} syntax.
<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title></title>
</head>
<body>
<table>
<tr>
<td><h4>User Name: </h4></td>
<td><h4 th:text="${user.fullName}"></h4></td>
</tr>
<tr>
<td><h4>Age: </h4></td>
<td><h4 th:text="${user.age}"></h4></td>
</tr>
</table>
</body>
</html>
When I go to /add endpoint my Controller creates a Contact object and generates an ID for it. This ID is then properly passed to a Thymeleaf view and showed on the webpage. When the form from the view is submitted (with POST) to another endpoint in my Controller all of the properties are passed except the ID field. I use Spring Model and #ModelAttribute annotation to pass the object to and from the view. Getters and setters for the entity are generated with Lombok.
Controller class:
#Controller
public class PhonebookController {
private final PhonebookService phonebookService;
#Autowired
public PhonebookController(PhonebookService phonebookService) {
this.phonebookService = phonebookService;
}
#GetMapping("/add")
public String addContact(Model model) {
model.addAttribute("contact", new Contact(EntityUtils.generateId()));
return "contact";
}
#PostMapping("/save")
public String validateAndSaveContact(#ModelAttribute("contact") #Valid Contact contact, BindingResult bindingResult) { // contact.getId() returns null
if (bindingResult.hasErrors()) {
return "contact";
}
phonebookService.getContactRepository().save(contact);
return "redirect:/contacts";
}
}
Entity class:
#Data
#NoArgsConstructor
#AllArgsConstructor
#Document(indexName = "contact")
public class Contact implements Comparable<Contact> {
#Id
private String id;
#NotEmpty(message = "Name can not be empty.")
private String name;
#NotEmpty(message = "Number can not be empty.")
#Pattern(regexp = "[0-9]+", message = "Number can contains only numbers.")
private String number;
public Contact(String id) {
this.id = id;
}
#Override
public int compareTo(Contact o) {
return this.getName().compareTo(o.name);
}
}
Thymeleaf view:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/webjars/font-awesome/css/font-awesome.min.css"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Add new contact</h1>
<form th:action="#{/save}" method="post" th:object="${contact}">
<div class="form-group">
<label for="idText">Identifier (automaticaly generated):</label>
<strong id="idText" th:text="${contact.getId()}"></strong>
</div>
<div class="form-group">
<label for="nameInput">Contact name:</label>
<input type="text" th:field="*{name}" th:value="*{name}" class="form-control" id="nameInput"/>
<div class="alert alert-warning" role="alert" th:if="${#fields.hasErrors()}" th:errors="*{name}"></div>
</div>
<div class="form-group">
<label for="numberInput">Phone number:</label>
<input type="text" th:field="*{number}" th:value="*{number}" class="form-control" id="numberInput"/>
<div class="alert alert-warning" role="alert" th:if="${#fields.hasErrors()}" th:errors="*{number}"></div>
</div>
<div class="form-group text-right">
<button type="submit" class="btn btn-success">Confirm</button>
<a class="btn btn-danger" th:href="#{/contacts}" role="button">Cancel</a>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
You need to have a hidden input field which contains the id value.
<div class="form-group">
<label for="idText">Identifier (automaticaly generated):</label>
<strong id="idText" th:text="${contact.getId()}"></strong>
<input id="id" th:field="*{id}" type="hidden"/>
</div>
I would like to help you, but I don´t know if you are using the same object to save the data in your table (your entity) and for return your view model in your controller. Normally you should use a different objects and mapping this in your service. It is posible that you have problems if you are using the same object.
I want to get the querystrting passing value from the given url, like: http://localhost:8080/app?contentid=10 I want to get the value of contentid is: 10 from the above url in my spring controller, how can I get this ?
Please note that if I pass any value there(like 10, 50,100, 200, ...etc - it can be any number), so whatever I am passing to contentid, that value should get into my controller. I want to get this contentid value from that url only, not from my html page or I don't want to pass from my html page. Currently I am getting null from the below code in controller, I am not getting the passing value(like 10 from the url). How can I achieve this ? Thanks in advance for your help !
app.html:
<form action="#" th:action="#{/app}" th:object="${TestData}" method="post">
<div class="form-group">
<label for="firstname">First Name: </label> <input type="text"
class="form-control" id="firstname" name="firstname" ></textarea>
</div>
<div class="form-group">
<label for="secondname">Second Name:</label> <input type="text"
class="form-control" id="secondname" name="secondname" />
</div>
<button type="submit" value="Submit">Submit</button>
</form>
TestData.java:
public class TestData implements Serializable{
private String firstname;
private String secondname;
private int contentid;
//setters and getters
public TestData() {}
public TestData(String firstname, String secondname, int contentid, ){
this.firstname = firstname;
this.secondname = secondname;
this.contentid = contentid;
}
#Override
public String toString() {
return String.format(
"TestData[firstname=%s, secondname=%s, contentid=%d]",
firstname, secondname, contentid);
}
}
Controller:
public class TestDataController {
#Autowired
TestService testDataService;
#RequestMapping(value="/app", method=RequestMethod.POST)
public String testDataSubmit(#RequestParam(required=false) Integer contentid, #ModelAttribute TestData testData, Model model, HttpServletRequest request) {
String id = request.getQueryString();
System.out.println("My Id: "+id);//null
System.out.println("URL Parameter: "+testData.getContentid());//0
System.out.println("URL Parameter passed objectid: "+contentid); //null
testDataService.saveTestDataDetails(testData);
return "app";
}
}
Service:
#Service
public class TestService {
#PersistenceContext
private EntityManager entityManager;
public void saveTestDataDetails(TestData testData) {
StoredProcedureQuery sp = entityManager.createStoredProcedureQuery("APP.TESTDATA");
sp.registerStoredProcedureParameter("firstname", String.class, ParameterMode.IN);
sp.registerStoredProcedureParameter("secondname", Integer.class, ParameterMode.IN);
sp.registerStoredProcedureParameter("contentid", Integer.class, ParameterMode.IN);
sp.setParameter("firstname", testData.getFirstname());
sp.setParameter("secondname", testData.getSecondname());
sp.setParameter("contentid", testData.getContentid());
sp.execute();
}
}
After discussion per chat I will provide you a working solution where you can specifiy any stuff by your own needs.
app.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<title></title>
</head>
<body>
<th:block th:if="${contentid != null}">
<div th:text="${'contentId: ' + contentid}"></div>
</th:block>
<form action="#" th:action="#{/app(contentid=${contentid})}" th:object="${TestData}"
method="post">
<div class="form-group">
<label for="firstname">First Name: </label>
<input type="text" class="form-control" id="firstname"
name="firstname" />
</div>
<div class="form-group">
<label for="secondname">Second Name:</label>
<input type="text" class="form-control" id="secondname"
name="secondname" />
</div>
<button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>
Controller:
#Controller
public class MyController {
#GetMapping("/app")
public String getApp(Model model) {
return "app";
}
#PostMapping("/app")
public String postApp(#RequestParam(required=false) Integer contentid, #ModelAttribute TestData testData, Model model, HttpServletRequest request) {
System.out.println(contentid);
if(contentid == null) {
contentid = ThreadLocalRandom.current().nextInt(0, 100 + 1);
}
model.addAttribute("contentid",contentid);
return "app";
}
}
First change your html code th:action="#{/app?contentid=10} and then add setter and getter method for the instance variable in the class TestData.