How to use jQuery to intercept form submissions and validate form input
There came a time where I had to create a HTML form to accept inputs from users in order to generate a report. Before submitting the form to the back end server, there are some validations that I can perform on the data at the client side to reduce the number of HTTP responses that my server had to generate for unwanted inputs. The cost savings is especially significant when the form submission contains large file as part of the HTTP request.
I chose to use jQuery for intercepting the form submissions and do some data validation before I allow the browser to create a HTTP request to the server. This post documents a proof of concept, as a stepping stone, to realize my objective.
The sample scenario
I have a form that asks the user for a number via a text field. When the user clicks on the submit button, jQuery will help me intercept the form submission and check whether the data submitted by the user is a numeric value. If data submitted by user is not numeric, the codes will stop the form submission and prompt a message.JavaScript to intercept form submission and validate the data from the user
$(document).ready(
function () {
$('#numberInputForm').submit(
function(event) {
var numberTextFieldVal = $('#numberTextField').val();
if (isNaN(numberTextFieldVal) || numberTextFieldVal == '') {
writeMessageToWebPage("Data submitted is not a number!");
event.preventDefault();
}
}
);
}
);
When the HTML document is ready, I attach a callback function for jQuery to notify me when there is a form submission triggered from the form with numberInputForm as the id. The callback function accepts a event object which can be used to stop the form submission later.
I then get the value of the text field with numberTextField as the id. Using the isNaN function, I check if the value from the text field is not a number of if it is an empty string. If the value from the text field is not a number, I call the function writeMessageToWebPage:
function writeMessageToWebPage(msg) {
$('#feedbackMsg').html(msg);
}
and call event.preventDefault to stop the form submission. The writeMessageToWebPage function receives a message from its input parameter and set it as the HTML contents to the HTML element with feedbackMsg as the id.
The php codes that realized the HTML form
Referring to the HTML reference that I had created earlier, I created a php script to generate the HTML codes for this proof of concept.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function writeMessageToWebPage(msg) {
$('#feedbackMsg').html(msg);
}
$(document).ready(
function () {
$('#numberInputForm').submit(
function(event) {
var numberTextFieldVal = $('#numberTextField').val();
if (isNaN(numberTextFieldVal) || numberTextFieldVal == '') {
writeMessageToWebPage("Data submitted is not a number!");
event.preventDefault();
}
}
);
}
);
</script>
</head>
<body>
<div id="feedbackMsg">
<?php
if (isset($_POST['numberTextField'])) {
echo 'You had just submitted the number: ' . $_POST['numberTextField'];
}
?>
</div>
<form id="numberInputForm" method="post" action="<?php echo $_SERVER['REQUEST_URI'];?>">
<fieldset>
<label for="numberTextField">Number:</label>
<input id="numberTextField" name="numberTextField" type="text"/>
</fieldset>
<fieldset>
<input name="submitButton" type="submit" value="submit"/>
</fieldset>
</form>
</body>
</html>
When a form submission is allowed, the browser will post the HTTP request to the same script that renders the form. The script checks if there is post data that is tagged with numberTextField. If there is, it displays the value back to the user.
Share
Tweet
Share
Save
