Today, I will discuss regarding form validation of jquery. when the user submitted the form at that time required for input field validation. there are two types of validation, first is server side and second is client side. see below example of jquery validation (client-side).

Required field, email validation and number required .. etc I will give validation information by our post.

See below code of jquery validation.

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js"></script>
<script type="text/javascript">

<!-- jQuery Form Validation code -->
$(function() {
    $("#frmAdd").validate({
					  
        rules: {
            txtFname: {
                required: true,
                lettersonly: true 
            },
            txtLname:{ 
               required:true
	    },
	    txtEmail: {
                required: true,
                email: true
            },
	    txtMobile:{
		required: true,
                number :true,
		minlength:10,
		maxlength:10
            }
        },
        // Specify the validation error messages
        messages: 
		{
            txtFname: {
                required: "this field required" 
            },
	    txtLname:{ 
                required:'this field required'
	    },
	    txtEmail: {
                required: 'this field required'
            },
	    txtMobile:{
		required: 'this field required'
	    }
        }
        
    });
  });
</script>
</head>
<body>
<form method="post" name="frmAdd" id="frmAdd">
        <table align="center">
            <tr>
                <td colspan="2" align="center">Add Record</td>
            </tr>
            <tr>
                <td>First Name</td>
                <td>
		  <input type="text" name="txtFname" value=""> 
		</td>
            </tr>
            <tr>
                <td>Last Name</td>
                <td>
		   <input type="text" name="txtLname"> 
		</td>
            </tr>
            <tr>
                <td>Address</td>
                <td><textarea name="txtAddress" rows="4" cols="16"></textarea> </td>
            </tr>
            <tr>
                <td>Email</td>
                <td>
		  <input type="text" name="txtEmail"> 
		</td>
            </tr>
            <tr>
                <td>Mobile</td>
                <td>
                  <input type="text" name="txtMobile"> 
		</td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                   <input type="submit" value="Add" name="btnadd"> 
                </td>
            </tr>
        </table>
</form>
</body>
</html>
Leave a reply
Comments Added Successfully!