jQuery required validation


 

jQuery required validation

jQuery "required" is the method to validate or check if the element is empty (text input) or unchecked (radio/checkbox) or nothing selected (select)

jQuery "required" is the method to validate or check if the element is empty (text input) or unchecked (radio/checkbox) or nothing selected (select)

jQuery required Validation:

jQuery "required" is the method to validate or check  if the element is empty (text input) or unchecked (radio/checkbox) or nothing selected (select). Works with text inputs, selects, checkboxes and radio buttons. To force a user to select an option from a select box, provide an empty options like <option value="">Choose...</option>.

Getting Started with jQuery required :

In this example there are the following steps which are used to make jQuery required. This example  Makes "field" always required. Nothing and blanks are invalid.

Step 1: In the first step we make css to create the text field background, height, width and other things

cmxform.css :

form.cmxform {

width: 370px;

font-size: 1.0em;

color: #333;

}

form.cmxform legend {

padding-left: 0;

}

form.cmxform fieldset {

border: none;

border-top: 1px solid #C9DCA6;

background-color: #F8FDEF;

}

form.cmxform label.error, label.error {

color: red;

font-style: bold

}div.error { display: none; }input {border: 1px solid black; }

Step 2: In the second step we make the connection with jquery plugins which are jquery1.js , jquery.validate.js and connection with css page.

<link rel="stylesheet" type="text/css" media="screen" href="../../plugin/cmxform.css" />

<script src="../../plugin/jquery1.js" type="text/javascript"></script>

<script src="../../plugin/jquery.validate.js" type="text/javascript"></script>

Step 3: In the third step we will make the HTML part , the HTML required for  the front end for this text field .With the help of this text field we check that the required field should not be empty.

<html>

<body>

0

<form class="cmxform" id="commentForm" method="post" action="">

<fieldset>

<p>

1

<label for="cname">Name</label>

<input id="name" name="name" />

</p>

2

<p>

<input class="submit" type="submit" value="Submit"/>

</p>

3

</fieldset>

</form>

</body>

4

</html>

Step 4: In the last step we will make the jQuery part , the jQuery required for  the checking the validation for specified  text field .With the help of this jQuery  we check that the required field should not be empty and we can restrict the minimum length of the text field.

<script type="text/javascript">

5

$(document).ready(function() {

$("#commentForm").validate({

rules: {

6

name: {

required: true,

minlength: 3

7

}

}

});

8

});

                            </script>

After using the following steps the the required text field will validated and we can check the validation by clicking on the submit button.

9

 

 

 

0

 

 

 

1

 

 

 

2

 

 

 

3

 

 

4

 

 

 

5

 

 

 

6

 

 

 

7

 

 

8

 

 

9

 

 

 

0

 

 

 

1

 

 

 

2

 

 

 

3

 

 

 

4

 

 

online demo: jQuery required validation

Ads