[JAVA] Je veux rendre le cadre de la zone de texte rouge lorsqu'il y a une erreur de saisie
introduction
J'ai essayé de rendre le cadre de la zone de texte rouge lorsqu'il y avait une erreur de saisie, mais j'ai eu du mal à l'implémenter, alors je vais le poster.
environnement
OS: macOS Catalina 10.15.6 JDK:14.0.1 Spring Boot 2.3.3 jquery 3.3.1-1 bootstrap 4.2.1
① Lors de la vérification de l'entrée
En effectuant le contrôle d'entrée (validation), l'auteur a créé la classe comme suit.
■ Classe de contrôleur
SignupController.java
package com.example.demo.login.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.dao.DataAccessException;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import com.example.demo.login.domain.model.GroupOrder;
import com.example.demo.login.domain.model.SignupForm;
import com.example.demo.login.domain.model.User;
import com.example.demo.login.domain.service.UserService;
//Contrôleur pour l'enregistrement d'un nouvel utilisateur
@Controller
public class SignupController {
@Autowired
private UserService userService;
//Transition vers l'écran d'enregistrement des utilisateurs
@PostMapping("/signup")
public String postSignUp(@ModelAttribute SignupForm form, Model model) {
return "signup/signup";
}
//Méthode d'exécution de l'enregistrement d'un nouvel utilisateur
@PostMapping("/signupUser") //Exécuter la validation dans l'ordre défini dans "Ordre de groupe"
public String postSignUp(@ModelAttribute @Validated(GroupOrder.class) SignupForm form, BindingResult bindingResult, Model model) {
//Erreur de liaison(Y compris l'erreur de validation)Si vous le faites, l'écran passera à l'écran d'enregistrement de l'utilisateur.
if (bindingResult.hasErrors()) {
return postSignUp(form, model);
}
//Afficher le contenu nouvellement enregistré sur la console
System.out.println(form);
//Créer une instance utilisateur
User user = new User();
//Définissez le contenu saisi dans le formulaire d'inscription dans la classe Utilisateur
user.setUserId(form.getUserId());
user.setMailAddress(form.getMailAddress());
user.setPassword(form.getPassword());
//Lancer le traitement vers la classe de service avec "User" qui définit le contenu de l'entrée du formulaire comme argument
boolean result = userService.insertOne(user);
//Afficher le résultat de l'exécution du travail d'enregistrement sur la console
if (result == true) {
System.out.println("insérer le succès");
} else {
System.out.println("l'insertion a échoué");
}
//Transition vers l'écran de connexion
return "redirect:/login";
}
}
■ Groupe de validation
GroupOrder.java
package com.example.demo.login.domain.model;
import javax.validation.GroupSequence;
//Exécutez la validation dans l'ordre «Groupe valide 1» et «Groupe valide 2» lors de l'enregistrement d'un nouvel utilisateur et de la mise à jour des informations d'enregistrement de l'utilisateur.
@GroupSequence({ValidGroup1.class, ValidGroup2.class})
public interface GroupOrder {
}
ValidGroup1.java
package com.example.demo.login.domain.model;
//Interface ValidGroup1
public interface ValidGroup1 {
}
ValidGroup2.java
package com.example.demo.login.domain.model;
//Interface ValidGroup2
public interface ValidGroup2 {
}
■ Classe de formulaire d'entrée
SignupForm.java
package com.example.demo.login.domain.model;
import javax.validation.constraints.Email;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.Pattern;
import org.hibernate.validator.constraints.Length;
import lombok.Data;
//Formulaire d'inscription utilisé dans le formulaire d'inscription d'un nouvel utilisateur
@Data
public class SignupForm {
/*
*null Espace demi-largeur Une erreur se produit si le caractère est vide(Classé comme groupe valide 1)
*3 à 20 caractères(Classé comme groupe valide 2)
*/
@NotBlank(groups = ValidGroup1.class)
@Length(min = 3, max = 20, groups = ValidGroup2.class)
private String userId;
/*
*null Espace demi-largeur Une erreur se produit si le caractère est vide(Classé comme groupe valide 1)
*Une erreur se produit si le format n'est pas l'adresse e-mail(Classé comme groupe valide 2)
*/
@NotBlank(groups = ValidGroup1.class)
@Email(groups = ValidGroup2.class)
private String mailAddress;
/*
*null Espace demi-largeur Une erreur se produit si le caractère est vide(Classé comme groupe valide 1)
*3 à 20 caractères(Classé comme groupe valide 2)
*Alphabet uniquement(Classé comme groupe valide 2)
*/
@NotBlank(groups = ValidGroup1.class)
@Length(min = 3, max = 20, groups = ValidGroup2.class)
@Pattern(regexp = "^[a-zA-Z0-9]+$", groups = ValidGroup2.class)
private String password;
}
■ Message d'erreur
messages.properties
#Message d'erreur de validation
signupForm.userId=Identifiant d'utilisateur
NotBlank.signupForm.userId={0}Entrez s'il vous plait
Length.signupForm.userId={0}Est{2}Plus que des lettres{１}Veuillez entrer sous la lettre
signupForm.mailAddress=adresse mail
NotBlank.signupForm.mailAddress={0}Entrez s'il vous plait
Email.signupForm.mailAddress=Veuillez saisir le format d'adresse e-mail
signupForm.password=mot de passe
NotBlank.signupForm.password={0}Entrez s'il vous plait
Length.signupForm.password={0}Est{2}Plus que des lettres{１}Veuillez entrer sous la lettre
Pattern.signupForm.password={0}Veuillez saisir des caractères alphanumériques demi-largeur
searchForm.keyword=mot-clé
NotBlank.searchForm.keyword={0}Entrez s'il vous plait
#Personnaliser le message d'erreur de connexion
AbstractUserDetailsAuthenticationProvider.badCredentials=L'ID de connexion ou le mot de passe est incorrect.
② Création du formulaire de saisie (avant modification)
Au départ, j'ai créé le html du formulaire de saisie comme indiqué ci-dessous.
signup.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/template}">
<head>
<meta charset="UTF-8"></meta>
<title>SignUp</title>
</head>
<!--Écran d'enregistrement de l'utilisateur-->
<body>
<div layout:fragment="content">
<div class="col-sm-4 offset-sm-4">
<div class="page-header">
<h1>Écran d'enregistrement de l'utilisateur</h1>
</div>
<form method="post" th:action="@{/signupUser}" th:object="${signupForm}">
<table class="table table-bordered table-hover">
<tr>
<td> <!--Si une erreur se produit dans le champ "userId" de l'objet de modèle "signupForm", "has" dans l'attribut de classe-Ajouter "erreur" et rendre la zone autour de la zone de texte rouge
-->
<div class="form-group" th:classappend="${#fields.hasErrors('userId')}?'has-error'">
<input type="text" class="form-control" placeholder="Identifiant de connexion" th:field="*{userId}"/>
<span class="text-danger"
th:if="${#fields.hasErrors('userId')}"
th:errors="*{userId}">
userId error
</span>
</div>
</td>
<tr>
<tr>
<td> <!--Si une erreur se produit dans le champ "mailAddress" de l'objet de modèle "signupForm", "has" dans l'attribut class-Ajouter "erreur" et rendre la zone autour de la zone de texte rouge
-->
<div class="form-group"
th:classappend="${#fields.hasErrors('mailAddress')}?'has-error'">
<input type="text" class="form-control" placeholder="adresse mail" th:field="*{mailAddress}"/>
<span class="text-danger"
th:if="${#fields.hasErrors('mailAddress')}"
th:errors="*{mailAddress}">
mailAddress error
</span>
</div>
</td>
<tr>
<tr>
<td> <!--Si une erreur se produit dans le champ "mot de passe" de l'objet de modèle "signupForm", "a" dans l'attribut de classe-Ajouter "erreur" et rendre la zone autour de la zone de texte rouge
-->
<div class="form-group"
th:classappend="${#fields.hasErrors('password')}?'has-errors'">
<input type="text" class="form-control" placeholder="mot de passe" th:field="*{password}"/>
<span class="text-danger"
th:if="${#fields.hasErrors('password')}"
th:errors="*{password}">
password error
</span>
</div>
</td>
<tr>
</table>
<button class="btn btn-primary col-sm-6" type="submit">s'inscrire</button>
</form>
</div>
</div>
</body>
</html>
Comme décrit dans le commentaire en html, lorsqu'une erreur s'est produite dans chaque champ, j'ai écrit que le cadre de la zone de texte devenait rouge, mais le résultat était que le cadre ne devenait pas rouge comme indiqué ci-dessous.
À propos, "has-error" est une classe Bootstrap qui rend le cadre de la zone de texte rouge.
Lorsque j'ai vérifié le «Guide de migration Bootstrap 4», il y avait la description suivante.
** [Modifications depuis Bootstrap 3.x] Changez le style d'affichage de chaque état de vérification en style à l'aide de la fonction de vérification de formulaire HTML5 .has-warning, .has-error, .has-success, .has-feedback, .form-control-feedback sont obsolètes En tant que solution de secours, les classes .is-invalid et .is-valid peuvent être utilisées à la place des pseudo-classes pour la validation côté serveur. .was-validated Aucune classe parent requise. ** **
URL：https://bootstrap-guide.com/components/forms?
Depuis Bootstrap 4, "has-error" a été aboli, et "is-invalid" semble être fourni en tant que fonction à la place.
③ Modifier le formulaire de saisie
Écrivez dans la balise d'entrée, pas dans la balise div.
signup.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/template}">
<head>
<meta charset="UTF-8"></meta>
<title>SignUp</title>
</head>
<!--Écran d'enregistrement de l'utilisateur-->
<body>
<div layout:fragment="content">
<div class="col-sm-4 offset-sm-4">
<div class="page-header">
<h1>Écran d'enregistrement de l'utilisateur</h1>
</div>
<form method="post" th:action="@{/signupUser}" th:object="${signupForm}">
<table class="table table-bordered table-hover">
<tr>
<td>
<div class="form-group">
<!--Si une erreur se produit dans le champ "userId" de l'objet modèle "signupForm", ajoutez l'attribut class et "is"-Rouge autour de la zone de texte avec "invalide"-->
<input type="text" class="form-control" placeholder="Identifiant de connexion" th:field="*{userId}"
th:classappend="${#fields.hasErrors('userId')}?'is-invalid'"/>
<span class="text-danger"
th:if="${#fields.hasErrors('userId')}"
th:errors="*{userId}">
userId error
</span>
</div>
</td>
<tr>
<tr>
<td>
<div class="form-group">
<!--Si une erreur se produit dans le champ "mailAddress" de l'objet modèle "signupForm", ajoutez l'attribut class et "is"-Rouge autour de la zone de texte avec "invalide"-->
<input type="text" class="form-control" placeholder="adresse mail" th:field="*{mailAddress}"
th:classappend="${#fields.hasErrors('mailAddress')}?'is-invalid'"/>
<span class="text-danger"
th:if="${#fields.hasErrors('mailAddress')}"
th:errors="*{mailAddress}">
mailAddress error
</span>
</div>
</td>
<tr>
<tr>
<td>
<div class="form-group">
<!--Si une erreur se produit dans le champ "mot de passe" de l'objet de modèle "signupForm", ajoutez l'attribut de classe et "est"-Rouge autour de la zone de texte avec "invalide"-->
<input type="text" class="form-control" placeholder="mot de passe" th:field="*{password}"
th:classappend="${#fields.hasErrors('password')}?'is-invalid'"/>
<span class="text-danger"
th:if="${#fields.hasErrors('password')}"
th:errors="*{password}">
password error
</span>
</div>
</td>
<tr>
</table>
<button class="btn btn-primary col-sm-6" type="submit">s'inscrire</button>
</form>
</div>
</div>
</body>
</html>
Lorsque je l'ai exécuté, j'ai pu rendre le cadre de la zone de texte rouge en cas d'erreur de saisie, comme indiqué ci-dessous.
référence: https://www.e-pokke.com/blog/bootstrap4-invalid-feedback.html https://learning-collection.com/thymeleaf%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9/
Recommended Posts