Form Validation using jquery Validation Engine

This simple tutorial demonstrate how to use jquery validation engine to validate your form fields.

I have simple form with two fields.

<input id="first_name" name="first_name" class="" type="text" value="">
<input id="last_name" name="last_name" class="" type="text" value="">  

Note that, These input fileds have no any validation classes. I have to includ several files to add validation.

Include following files.

<link rel="stylesheet" href="../css/validationEngine.jquery.css" type="text/css" />
<script src="../js/jquery-1.8.2.min.js" type="text/javascript">
</script>
<script src="../js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
</script>
<script src="../js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
</script>

Remember that, Include jquery file first ! Otherwise your validation may not work !

Now I Can add validation Classes to my input fields. See following code snippets. I need these two fields with 100 letters and could not be used some numeric values. So I have added following validation rules.


required - this fields are required
custom[onlyLetterSp] - only letter ! No numeric values are allowed !
maxSize[100] - Maximum length of field is 100 letters

<input id="first_name" name="first_name" class="form-control input-md validate[required,custom[onlyLetterSp],maxSize[100]]" type="text" value="">
<input id="last_name" name="last_name" class="form-control input-md validate[required,custom[onlyLetterSp],maxSize[100]]" type="text" value=""> 

Now I need to set an id for my form. othrwise validation engine does not works ! So add id to your form !

<form class="form-horizontal" id="validate" action="controller/function" method="post">


</form>

Now I am ready to invoke validation Engine. Add following jquery code to your html script.

<script>
    $(document).ready(function() {
        $("#validate").validationEngine();
    });
</script>

Now it Should be work !

Demo :

Click here to Download jquery Validation Engine.

Leave a Comment ! I is a great help to me !