pTutorial

New way to learn Programming

Required Field Validation using JQuery

JQuery: HTML Form - checking for non empty field

In this article we demonstrate the form validation using JQuery. We will demonstrate all the concepts using a real world example.

The form validation play important role at the time of making web application. Web application may be in the Java, PHP or Dot net.

Often situations arise when web master wanted from the user to put the value in the HTML form without entering the value user cannot submit the form. In this case JavaScript and JQuery is used in the client side to validate the form. Here is a simple JQuery script to notify the user "this is a required field" with proper message and colour notification.

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==""){
$('#uk').css("border-color","red");
$('#divData').html("Please Enter Name"+ " " +z);
return false;
}
else{
$('#uk').css("border-color","green");
$('#divData').html("You have entered"+ " " +z);
//return false;
}
});
});

</script>
<style>
#uk{
border-color: green;
border-width: 5px;
}  
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

See Also


QUOTES OF THE DAY

The heart of melody can never be put down.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER