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">×</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);
}
});
}