Spring MVC and JQuery Ajax form submit and validation

Tools and technologies used:

  • Spring boot 2
  • JQuery
  • Gradle
  • IntelliJ IDEA

Project Structure

Spring MVC and JQuery Ajax form submit and validation project structure

Gradle dependency

implementation 'org.springframework.boot:spring-boot-starter-web'

Student.java

package com.shahediqbal.springajaxformvalidation.model;

import javax.validation.constraints.Email;
import javax.validation.constraints.NotEmpty;

public class Student {
    @NotEmpty(message = "Please enter first name.")
    private String firstName;
    @NotEmpty(message = "Please enter last name.")
    private String lastName;
    @NotEmpty(message = "Please enter email address.")
    @Email(message = "Please enter a valid email address.")
    private String email;

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

StudentController.java

package com.shahediqbal.springajaxformvalidation.controller;

import com.shahediqbal.springajaxformvalidation.model.Student;
import com.shahediqbal.springajaxformvalidation.response.StudentResponse;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.validation.Valid;
import java.util.Map;
import java.util.stream.Collectors;

@Controller
public class StudentController {

    @PostMapping(value = "/saveStudent", produces = {MediaType.APPLICATION_JSON_VALUE})
    @ResponseBody
    public StudentResponse saveEmployee(@ModelAttribute @Valid Student student,
                                        BindingResult result) {

        StudentResponse response = new StudentResponse();

        if (result.hasErrors()) {

            Map<String, String> errors = result.getFieldErrors().stream()
                    .collect(
                            Collectors.toMap(FieldError::getField, FieldError::getDefaultMessage)
                    );

            response.setValidated(false);
            response.setErrorMessages(errors);
        } else {

            response.setValidated(true);
        }
        return response;
    }
}

StudentResponse.java

package com.shahediqbal.springajaxformvalidation.response;

import java.util.Map;

public class StudentResponse {
    private boolean validated;
    private Map<String, String> errorMessages;

    public boolean isValidated() {
        return validated;
    }

    public void setValidated(boolean validated) {
        this.validated = validated;
    }

    public void setErrorMessages(Map<String, String> errorMessages) {
        this.errorMessages = errorMessages;
    }

    public Map<String, String> getErrorMessages() {
        return errorMessages;
    }
}

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/registration.js"></script>
</head>
<body>

<h2>Registration</h2>

<form id="registrationForm" action="/saveStudent">
    First name:<br>
    <input type="text" name="firstName" value="">
    <br>
    Last name:<br>
    <input type="text" name="lastName" value="">
    <br>
    email:<br>
    <input type="email" name="email" value="">
    <br><br>
    <input id="submitButton" type="submit" value="Submit">
</form>

</body>
</html>

registration.js

$(function () {
    $('#submitButton').click(function (e) {

        //Prevent default submission of form
        e.preventDefault();

        //Remove previous errors
        $('input').next('span').remove();

        $.post({
            url: '/saveStudent',
            data: $('#registrationForm').serialize(),
            success: function (res) {
                if (res.validated) {
                    //take your successful action here; you may want to redirect to another page
                    alert("Registration Successful");
                } else {
                    $.each(res.errorMessages, function (key, value) {
                        $('input[name=' + key + ']').after('<span class="error">' + value + '</span>');
                    });
                }
            }
        })
    });

});

Click for the full source code

Leave a Reply

Close Menu