0

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);
        }
    });
}
3
Contributors
2
Replies
19
Views
8 Months
Discussion Span
Last Post by otengkwaku
0

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

0

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"
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.