pTutorial

New way to learn Programming

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>

Download

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.

See Also


QUOTES OF THE DAY

Well-begun is half done.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER