JQuery example
JQuery: HTML Form - Checking for non empty field
In this article we demonstrate the non-empty form text field validation with alert. Everything is same as previous example except we are using alert in this example.
Required Field Validation
The following JQuery Script can be used to check whether user has entered anything in a given field or not. If user submit the form without filling this field the border of text field can be red and form will not submit.
Required Field Validation Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/
libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#kk').click(function () {
var z = $('#uk').val();
if (z == "") {
alert("Please Enter Name");
return false;
}
else {
alert("You have entered" + " " + z);
return false;
}
});
});
</script>
<style>
table{
border: 1px solid #080808;
margin: 5px;
padding: 10px;
}
</style>
</head>
<body>
<h4>Required field form Validation</h4>
<table>
<tr>
</tr>
<tr>
<td>Enter Name</td>
<td> <input type="text" id="uk" name="kk1"></td>
</tr>
<tr>
<td> <input type="submit" id="kk" value="Check"></td>
</tr>
</table>
<div id="divData"></div>
</body>
</html>
Explanation
This call back function starts executing when the ID uk is clicked (that is a button id). After that get the value of text field with the help of id and val() function and check for blank.
