I have a validateRequiredField(e) function to validate empty field and a
validateExistingEmail() to validate an email has existed in my database.

I am able to see both alert("Field" + i + "is Required"); when the fields are empty and alert("This email has been registered"); when the email existed in my database.

The problem I am facing is I am unable to submit my form once the validation is done and submit button is pressed.

Please help

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <a href="#" class="btn btn-default btn-lg" data-toggle="modal"
            data-target="#RegFormModal">Open Modal Form</a>
        <!-- Modal -->
        <div class="modal fade" id="RegFormModal" tabindex="-1" role="dialog"
            aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss=modal>
                            <span aria-hidden="true">&times;</span> <span class="sr-only ">Close</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel ">Form</h4>
                    </div>
                    <!-- Modal Body -->
                    <div class="modal-body ">
                        <form id="registrationForm" name="registrationForm" role="form"
                            action="Registration" method="POST">
                            <div class="form-group row">
                                <label for="fullName" class="col-md-2">Full Name</label>
                                <div class="col-md-5">
                                    <input type="text" class="form-control" id="fullName"
                                        placeholder="Enter your full name" name="fullName" />
                                </div>
                                <div class="col-md-4">
                                    <span id="fullNameErrorMsg" style="display: none;"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="phone" class="col-md-2">Phone No</label>
                                <div class="col-md-5">
                                    <input type="text" class="form-control" id="phone"
                                        placeholder="Enter you phone number" name="phone" />
                                </div>
                                <div class="col-md-4">
                                    <span id="phoneErrorMsg" style="display: none;"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="email" class="col-md-2">Email</label>
                                <div class="col-md-5">
                                    <input type="email" class="form-control" id="email"
                                        placeholder="Enter your email" name="email" />
                                </div>
                                <div class="col-md-4">
                                    <span id="emailErrorMsg" style="display: none;"></span>
                                </div>
                            </div>
                            <hr>
                            <div style="text-align: center;">
                            <button id="btn" type="submit" class="btn btn-default">Submit</button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

formValidation.js

$(document).ready(function() {
    $("#btn").click(function(e) {
        validateRequiredField(e);
        validateExistingEmail();
    });
});

function validateRequiredField(e) {
    var fieldIDArray = [ $('#fullName'), $('#phone'), $('#email') ];
    var spanIDArray = [ $('#fullNameErrorMsg'), $('#phoneErrorMsg'),
            $('#emailErrorMsg') ];

    for (i = 0; i < fieldIDArray.length; i++) {
        if (!fieldIDArray[i].val().length) {
            e.preventDefault();
            alert("Field " +  i + " is required");
        } 
    }
}

function validateExistingEmail() {
    var fieldIDArray = [ $('#fullName'), $('#phone'), $('#email') ];
    var spanIDArray = [ $('#fullNameErrorMsg'), $('#phoneErrorMsg'),
            $('#emailErrorMsg') ];

    dataString = $(".modal-body #registrationForm").serialize();

    var email = $("#email").val();
    dataString = "email=" + email;

    $.ajax({
        type : "POST",
        url : "Registration",
        data : dataString,
        dataType : "json",

        success : function(data, textStatus, jqXHR) {
            if (data.success) {
                // $('#ajaxReponse').val(data.value.email);
                if (data.value.email === email) {
                    alert("This email has been registered");
                }
            }
        },
        error : function(jqXHR, textStatus, errorThrown) {
            console.log("Something really bad happened " + textStatus);
            // $("#a").html(jqXHR.responseText);
        },
        beforeSend : function(jqXHR, settings) {
            settings.data += "&email=" + email;
            // alert(settings.data);
            $('#btn').attr("disabled", true);
        },

        complete : function(jqXHR, textStatus) {
            $('#btn').attr("disabled", false);
        }
    });
}
Member Avatar
diafol

WHat is the destination file of your submission? It simply says "Registration". Is this right? Is the data reachign the jsp file?

You are using ajax to submit for data so do this:

  1. Remove action="Registration" method="POST" from your form tag.
  2. Change type="submit" to type=buttom.
  3. Check your url again url : "Registration". if it is a file should it end with jsp or a file type. eg: url : "/Registration.jsp"