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'


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;


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;

public class StudentController {

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

        StudentResponse response = new StudentResponse();

        if (result.hasErrors()) {

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

        } else {

        return response;


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;


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


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



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

        //Prevent default submission of form

        //Remove previous errors

            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