Jquery Form Validation Example

June 10, 2018 XpertPhp Comments 2 comments

Today, We will explain to you how to make form validation in jquery(Jquery Form Validation Example). when the user submitted the form at that time required for input field validation. there are two types of validation, the first is server-side, and the second is client-side. see below example of jquery form validation (client-side).

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

Read Also:
Php Form Validation Example

See below the 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>

<html>

<head>

$(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>

<tr>

<td colspan="2" align="center">Add Record</td>

</tr>

<tr>

<td>First Name</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>Address</td>

</tr>

<tr>

<td>Email</td>

<td>

</td>

</tr>

<tr>

<td>Mobile</td>

<td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

Please follow and like us: