JQuery - ValidationEngine

Mächtiges und recht einfaches JavaScript Tool zur Validierung von Formularen. Fehleranzeige in Sprechblasen direkt am Eingabefeld.

Links

http://posabsolute.github.io/jQuery-Validation-Engine/

Quickstart

Einbinden

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

Initialisieren

$("#form.id").validationEngine(action or options);

Erweitern

Über jquery.validationEngine-en.js (oder die anderen Lokalisierungsdateien kann man neue Validierungen hinzufügen oder die error messages ändern.

Beispiele

Ein paar Beispiele von: http://it.post80s.com/jquery-form-validation (Zugriff 2013-08)

At least one of the field of the group must be filled. It needs to be given a group name that is unique across the form.

<input value="" class="validate[groupRequired[payments]]" type="text" name="creditcard" id="creditcard" />
<input class="validate[groupRequired[payments]]" type="text" id="paypal" name="paypal"/>

The following example, enforces a minimum of two selected checkboxes

<input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck1" value="5"/>
<input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck2" value="3"/>
<input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck3" value="9"/>

Note how the input.name is identical across the fields.

radios

<input id="radio1" class="validate[required] radio" type="radio" value="5" name="group0">
<input id="radio2" class="validate[required] radio" type="radio" value="3" name="group0">
<input id="radio3" class="validate[required] radio" type="radio" value="9" name="group0">

Password fields

<input type="password" name="NewPwd" id="NewPwd" value="123" class="validate[required] text-input">
<input type="password"
name="NewPwd2" id="NewPwd2" class="validate[required,equals[NewPwd]] text-input">

You can run other functions after the form is validated and before the form is submitted:

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#fCompanyEdit").validationEngine({
         promptPosition : "centerRight"
        ,onAjaxFormComplete: function(status,form) {
          if (status === true) {
            return pageLoad_onsubmit();
            form.submit();
          }
         }
     
    });
});
</script>