使用选项卡式表单进行Spring mvc验证以显示

时间:2017-07-16 13:34:31

标签: jsp spring-mvc

我是Spring MVC的初学者。我开发了一个简单的注册和登录应用程序。

我将注册和登录页面设置为使用bootstrap和CSS在同一页面(选项卡)上,让Login(选项卡)处于活动状态。如果发生任何验证错误,代码工作正常,但我的问题是,当发生验证错误时,它返回到Login选项卡处于活动状态的视图,当我单击Signup选项卡时,它会显示字段旁边的错误消息。

我希望“注册”页面处于活动状态,以便用户可以在第一时间看到错误消息。此外,我想阻止每次验证后加载新表单。

请帮忙解决这个问题。 谢谢。 以下是我的代码。

index2.jsp     

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-login">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-6">
                            <a href="#" class="active" id="login-form-link">Login</a>
                        </div>
                        <div class="col-xs-6">
                            <a href="#" id="signup-form-link">Signup</a>
                        </div>
                    </div>
                    <hr>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <form id="login-form" action="" method="post" role="form"
                                style="display: block;">
                                <div class="form-group">
                                    <input type="text" name="username" id="username" tabindex="1"
                                        class="form-control" placeholder="Username" value="">
                                </div>
                                <div class="form-group">
                                    <input type="password" name="password" id="password"
                                        tabindex="2" class="form-control" placeholder="Password">
                                </div>
                                <div class="form-group text-center">
                                    <input type="checkbox" tabindex="3" class="" name="remember"
                                        id="remember"> <label for="remember">
                                        Remember Me</label>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-6 col-sm-offset-3">
                                            <input type="submit" name="login-submit" id="login-submit"
                                                tabindex="4" class="form-control btn btn-login"
                                                value="Log In">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="text-center">
                                                <a href="https://phpoll.com/recover" tabindex="5"
                                                    class="forgot-password">Forgot Password?</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>


                            <form:form id="signup-form" action="validateSignUp" role="form"
                                style="display: none;" commandName="signUpObj" >

                                <div class="form-group">

                                        <form:input path="userName" tabindex="1"
                                        class="form-control" placeholder="Username" value=""/>
                                        <form:errors path="userName"/>
                                </div>
                                <div class="form-group">

                                        <form:input path="email" tabindex="1"
                                        class="form-control" placeholder="Email Address" value=""/>
                                        <form:errors path="email"/>
                                </div>
                                <div class="form-group">


                                        <form:password path="password" 
                                        tabindex="2" class="form-control" placeholder="Password"/>
                                        <form:errors path="password"/>
                                </div>

                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-6 col-sm-offset-3">
                                            <input type="submit" name="signup-submit" id="signup-submit"
                                                tabindex="4" class="form-control btn btn-signup"
                                                value="Signup Now">
                                        </div>
                                    </div>
                                </div>
                                <%--                                </form> --%>
                            </form:form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</body>

SignUpController.java

package com.controllers;

import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
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;

import com.entities.SignUp;
import com.services.SignUpService;

@Controller
public class SignUpController {

    @Autowired
    SignUpService signUpService;

    @RequestMapping(value = "/showSignUp",method=RequestMethod.GET)
    public String showSignUpPage(Map<String, Object> model) {
         SignUp signUpObj=new SignUp();
         model.put("signUpObj", signUpObj);
        return "SignUp";
    }


    @RequestMapping(value = "/index",method=RequestMethod.GET)
    public String showIndex(Map<String, Object> model) {
        System.out.println("in conto");

         SignUp signUpObj=new SignUp();

         model.put("signUpObj", signUpObj);
        return "index2";
    }





}

ValidationController.java

package com.controllers;

import java.util.Map;

import javax.validation.Valid;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.validation.ValidationUtils;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import com.entities.SignUp;
import com.services.SignUpService;
import com.validators.SignUpValidator;

@Controller
public class ValidationController {

    @Autowired
    SignUpService signUpService;

    @Autowired
    SignUpValidator signUpValidator;

    @RequestMapping(value = "/validateSignUp")
    public String validateSignUp(@Valid @ModelAttribute("signUpObj") SignUp signUpObj, BindingResult result,
            Map<String, Object> model) {


        signUpValidator.validate(signUpObj, result);
        if(result.hasErrors())
        {
            return "index2";
        }
        else
        {
            signUpService.newSignUp(signUpObj);
            System.out.println(signUpObj.getSignId()+"---"+signUpObj.getUserName());
            model.put("signUpObj", signUpObj);
            return "AddUser";
        }

    }

}

SignUpValidator.java

package com.validators;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.validation.Errors;
import org.springframework.validation.ValidationUtils;
import org.springframework.validation.Validator;

import com.entities.SignUp;
import com.services.SignUpService;

@Component
public class SignUpValidator implements Validator {
    @Autowired
    SignUpService signUpService;

    public boolean supports(Class<?> arg0) {
        // TODO Auto-generated method stub
        return false;
    }

    public void validate(Object target, Errors errors) {
        SignUp obj = (SignUp) target;

        // for SignUp verification
        if (!obj.getUserName().isEmpty()) {
            SignUp verifyObj = signUpService.getSignUp(obj);
            if (verifyObj != null)
                errors.rejectValue("userName", "error.userName", "User Name already exists");

        }
        if (obj.getUserName().equals("") || obj.getUserName().isEmpty()) {

            errors.rejectValue("userName", "error.userName", "User Name mandatory");
        }

        else if (obj.getPassword().isEmpty()) {
            errors.rejectValue("password", "error.password", "Password is mandatory");
        } else if (obj.getPassword().length() < 3 || obj.getPassword().length() > 6) {
            errors.rejectValue("password", "errors.password", "Password must be  3 to 6 characters");
        }

    }

}

2 个答案:

答案 0 :(得分:0)

在结束<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> - This one will work 代码

之前,将以下javascript添加到index2.jsp
<body>

如果未使用,请将<script> <spring:hasBindErrors name="signUpObj"> $("#signup-form-link").trigger("click"); </spring:hasBindErrors> </script> 标记lib添加到您的jsp中。

spring

答案 1 :(得分:0)

这是因为您在不清除错误值的情况下渲染视图,请尝试:

@RequestMapping(value = "/validateSignUp")
    public ModelAndView validateSignUp(@Valid @ModelAttribute("signUpObj") SignUp signUpObj, BindingResult result,
            Map<String, Object> model) {


        signUpValidator.validate(signUpObj, result);
        if(result.hasErrors())
        {
            return new ModelAndView("index2", "singUpObj", new SingUp());
        }
        else
        {
            signUpService.newSignUp(signUpObj);
            System.out.println(signUpObj.getSignId()+"---"+signUpObj.getUserName());
            return new ModelAndView("AddUser", "singUpObj", signUpObj);
        }

    }

[编辑]

这是一个ajax调用示例:

$('#login-form').on('submit', function(event){

        var self = this;
        var form = $(this);
        var errorMsg = $('#errorMsg');


        if (form.data('requestRunning')) {
            return;
        }

        form.data('requestRunning', true);
        event.preventDefault();
        $.ajax({
            url: form.attr("action"),
            type: form.attr("method"),
            data: form.serialize(),
            success: function(result){

               console.log(result.login);
               if(result.login == undefined){
                   self.submit();
               }else{
                   errorMsg.text(result.login.FAILURE).addClass("alert alert-danger");

               }

            },
            complete: function (e) {               
                form.data('requestRunning', false);
           }

        });

的问候,