Documentation‎ > ‎Complete guide‎ > ‎

Alert Mode

One simple mode to use jFormVal is Alert Mode...

Our plugin keeps a error list and then alerts it! =P

There are 2 variables you should be aware of:
  • jVal.alert:
    It tells us that you want to display an alert in case of error.
  • jVal.alertAll:
    It says that you want to display ALL alerts... For example,
    if you have an element with two or more validation errors,
    they will all be displayed. If you set 'alertAll' to 'false', then
    only the first error will be displayed.
Decided that, all the process is the same...

Sample HTML:
<form id="formAlert01">
    <label for="field01">Age: </label>
    <input id="field01" type="text" />
    <label for="field02">Blood type: </label>
    <select id="field02">
        <option>Dont know</option>
    <input type="submit" />

Sample Validation:
<script type="text/javascript">
jQuery(document).ready(function() {

jVal.alert = true; //display alert
jVal.alertAll = true; //show all errors = false; //change element style

jQuery('#formAlert01').submit(function() {
$('#field01').valText('Age').max(3).min(1).dif(['0', '00', '000']);
$('#field02').valCombo('Blood type')
                .exptxt(['O', 'a', 'b', 'ab'])
                .dif('Dont know');

return $.validate();

Now 'Age' must be filled, with 3 characters max, and they must not be '0', '00' or '000', and 'Blood type' must be filled too, but only with 'O', 'a', 'b' or 'ab'...
Note that the only possible selection for the 'blood type' field is 'O' because the validation is case SENSITIVE (relax, there is a feature being developed to adjust the case sensitiveness) 

To see it working, run the attached sample at the bottom of the page.

One last thing: If you want to use the messages, but not in that ugly 'alert()' function, you can decide which functions to use, including your own... You simply set what function to use, it only has to have  like this:

jVal.alertFunction: function(arg) { /* do whatever you want with arg */ };

For example, you can show the messages inside some html element, like this:

jVal.alertFunction = function(msg) {
    var msgOut = '';
    for (var i in msg) {
        msgOut += (msg[i] + '<br />')
    msgOut += '<br/><strong>click here to close</strong>';

You will get something like this on your page:

Of course you can do a lot better than this, it is only an example.
Check out the attached file at the bottom.

Alexandre Zara,
Aug 2, 2010, 8:30 PM
Alexandre Zara,
Aug 8, 2010, 9:35 PM