0

Estoy trabajando en un sitio web en java con Spring Web MVC. En la página principal index.jsp tengo el botón registrar el cual abre el formulario de registro en "Modal", el problema es que al hacer submit con los campos vacíos se recargar la página y el formulario modal se cierra y el mensaje de error no es visible hasta que se habre nuevamente el formulario modal.

index.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="UTF-8"> 
        <title>JSP Page</title>
        <link rel="stylesheet" href="resources/css/styles.css" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>        
        <div class="modal fade" id="RegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title w-100" id="myModalLabel">Registración</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                <div class="modal-body">
                    <form:form commandName="user">
                        <div class="form-group">
                            <form:input path="name" placeholder="Nombre" cssClass="form-control"/>
                            <form:errors path="name"/>
                        </div>
                        <div class="form-group">
                            <form:input path="email" placeholder="Correo" cssClass="form-control"/>
                            <form:errors path="email"/>
                        </div >
                        <div class="form-group"> 
                            <form:input path="phone" placeholder="Teléfono" cssClass="form-control"/>
                            <form:errors path="phone"/>
                        </div>
                        <div class="form-group">
                            <form:password path="password" placeholder="Contraseña" cssClass="form-control"/>
                            <form:errors path="password"/>
                        </div>
                        <div class="row form-bottom">
                            <div class="col">
                                <input type="submit" value="Registrarse" class="btn">
                            </div>    
                        </div>
                    </form:form> 
                </div>
            </div>
          </div>
        </div>  
        <header>
            ...
        </header>
        <div id="main_content">
            ..
        </div>
        <footer>
            ...
        </footer>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>        
    </body>
</html>

UserValidator.java

package model;

import java.util.regex.Matcher;
import java.util.regex.Pattern;
import org.springframework.validation.Errors;
import org.springframework.validation.ValidationUtils;
import org.springframework.validation.Validator;

public class UserValidator implements Validator {

    private static final String EMAIL_PATTERN = "^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@" + "[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$";

    private Pattern pattern;
    private Matcher matcher;

    @Override
    public boolean supports(Class<?> type) {
        return User.class.isAssignableFrom(type);
    }

    @Override
    public void validate(Object o, Errors errors) {
        User user = (User) o;

        ValidationUtils.rejectIfEmptyOrWhitespace(errors, "name", "required.name", "Ingrese el campo nombre.");
        ValidationUtils.rejectIfEmptyOrWhitespace(errors, "email", "required.email", "Ingrese el campo correo.");
        ValidationUtils.rejectIfEmptyOrWhitespace(errors, "phone", "required.phone", "Ingrese el campo teléfono.");
        ValidationUtils.rejectIfEmptyOrWhitespace(errors, "password", "required.password", "Ingrese una contraseña.");

        if (!(user.getEmail() != null && user.getEmail().isEmpty())) {
            this.pattern = Pattern.compile(EMAIL_PATTERN);
            this.matcher = pattern.matcher(user.getEmail());
            if (!matcher.matches()) {
                errors.rejectValue("email", "email.incorrect", "El correo ingresado no es válido.");
            }
        }
    }

}

FormController.java

package controller;

import model.User;
import model.UserValidator;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class FormController {

    UserValidator userValidator = new UserValidator();
    ModelAndView mav = new ModelAndView();

    @RequestMapping(value = "index.htm", method = RequestMethod.GET)
    public ModelAndView Register() {
        mav.addObject("user", new User()); 
        mav.setViewName("index");
        return mav;
    }

    @RequestMapping(value = "index.htm", method = RequestMethod.POST)
    public String Register(@ModelAttribute("user") User u, BindingResult result) {

        this.userValidator.validate(u, result);

        if (result.hasErrors()) {
            return "index";
        }

        return "redirect:/home.htm";
    }    
}

¿Cómo puedo hacer para que al validar el formulario no se recarge la página y el error aparezca directamente después de hacer submit?

Agradezco mucho la ayuda de antemano.

3
  • 1
    procesa la petición con AJAX de modo que la petición se haga por debajo y no recargues la página completa
    – user75901
    el 1 abr. 2019 a las 0:38
  • Como ya te dijeron la mejor forma es enviar los datos por ajax y reciber una respuesta el 2 abr. 2019 a las 13:26
  • Podrían ayudarme con un ejemplo o como puedo hacerlo, por favor, realmente soy nuevo en esto.
    – Neon
    el 4 abr. 2019 a las 11:59

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.