Documentation‎ > ‎

5 minutes guide

Lets get you ready to use main jFormVal features in 5 minutes.

Usage Modes
We have two usage modes, 'alert' and 'style.
Alert mode will display a simple JavaScript alert with error messages while Style mode will change the style of the element on the web page. You can use one or both modes together. Lets focus on alert mode.
jVal.alert = true;
jVal.style = false;

Alert Mode
Now that we are using alert mode, we need the bundle file, which has all the messages needed, in different languages. You can download it here.
To use a specific language, set up the lang variable.
jVal.lang = 'en_us';

Validation
Here we go to the validation itself.
Currently (at v0.5) we have four elements that can be validated:
  • Text Field (input type='text')
  • Check box (input type='checkbox')
  • Radio Button (input type='radio')
  • Drop down (select)
Each one supports different validation methods, you can have a better description on the complete guide.

All validations work the same:
  1. Select element with jQuery
  2. Give it a fancy name
  3. Add restrictions
  4. Validate it!
Lets validate a CheckBox whose name is 'prefs':
1. Select it:
$('input[name=prefs]')

2. Give it a name:
.valCheck('Preferences')

3. Add restrictions:
.min(2).max(4);

Now we have:
$('input[name=prefs]').valCheck('Preferences').min(2).max(4);

Meaning:
Get 'prefs', name it 'preferences' and assure that at least 2 and no more than 4 will be selected

4. Validate:
return jQuery.validate();
That will return true if the validation is ok and false if an error has occurred. Also, in the case of an error, an alert will pop-up saying something like: 'You should check at least 2 options from Preferences'.

All done!

Lets get the full picture
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.validator-0.3.js"></script>
<script type="text/javascript" src="jquery.validator-bundle.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function() {
        jVal.lang('en_us');
        jVal.alert = true;
        jVal.style = false;
        jQuery('#formTeste').submit(function(){
            $('input[name=prefs]').valCheck('Preferences').min(2).max(4);
            return jQuery.validate();
        });
    });
</script>






Comments