Validetta demos

Back to examples

Basics

Warning!

To show error messages healthy, each field must be wrapped by an element like <div>


Example 1 (Inputs, Textarea)


<form id="exm1" method="POST" action="#">
    <div>
        <label>Required, minLength[2], maxLength[3] :</label>
        <input type="text" name="name" data-validetta="required,minLength[2],maxLength[3]">
    </div>
    <div>
        <label>Required, Number :</label>
        <input type="text" name="number" data-validetta="number,required">
    </div>
    <div>
        <label>EqualTo (name number) :</label>
        <input type="text" name="equalto" data-validetta="required,equalTo[number]">
    </div>
    <div>
        <label>Different (name number) :</label>
        <input type="text" name="different" data-validetta="different[number]">
    </div>
    <div>
        <label>Email :</label>
        <input type="text" name="email" data-validetta="email">
    </div>
    <div>
        <label>Credit Cart :</label>
        <input type="text" name="creditCard" data-validetta="creditCard" />
    </div>
    <div>
        <label>RegExp :</label>
        <input type="text" name="regExp" data-validetta="regExp[regname]" />
    </div>
    <div>
        <label>Callback :</label>
        <input type="text" name="callback" data-validetta="callback[sum]" />
    </div>
    <div>
        <label>Required ( Textarea ) :</label>
        <textarea name="exm-txt" data-validetta="required"></textarea>
    </div>
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
</form>
(function($){
    $('#exm1').validetta({
        validators: {
            regExp: {
                regname : {
                    pattern : /^hello$/i,
                    errorMessage : 'Custom Reg Error Message !'
                },
                // you can add more
                example : {
                    pattern : /^[\+][0-9]+?$|^[0-9]+?$/,
                    errorMessage : 'Please enter number only !'
                }
            },
            callback: {
                sum: {
                    callback:  function( el, value ) {
                        if ( value == ( 3 + 5 ) ){
                            return true
                        }
                        return false
                    },
                    errorMessage: "Incorrect total"
                }
            }
        },
        realTime : true
    });
});

Example 2 (Checkboxes, Selectboxes, Radio)




1
2
3

<form id="exm2" method="POST" action="#">
    <div>
        <label>Required ( Checkbox ) :</label> <br>
        <input type="checkbox" data-validetta="required" name="exm-cbr"/>
    </div>
    <div>
        <label>maxChecked[1], minChecked[2]</label><br>
        <input type="checkbox" name="exm-cb" data-validetta="minChecked[1],maxChecked[2]"> 1 <br />
        <input type="checkbox" name="exm-cb" data-validetta="minChecked[1],maxChecked[2]"> 2 <br />
        <input type="checkbox" name="exm-cb" data-validetta="minChecked[1],maxChecked[2]"> 3 <br />
    </div>
    <div>
        <label>Required ( radio ) :</label><br>
        <input type="radio" name="exm-rd" data-validetta="required">
        <input type="radio" name="exm-rd" data-validetta="required">
        <input type="radio" name="exm-rd" data-validetta="required">
    </div>
    <div>
        <label>Required ( selectbox ) :</label>
        <select data-validetta="required" name="exm-sb">
            <option val="">Please select an option</option>
            <option val="1">1</option>
            <option val="2">2</option>
            <option val="3">3</option>
            <option val="4">4</option>
            <option val="5">5</option>
        </select>
    </div>
    <div>
        <label>minSelected[2],maxSelected[2] :</label>
        <select data-validetta="minSelected[2],maxSelected[2]" multiple="multiple" name="exm-msb">
            <option value="">Please select an option</option>
            <option val="1">1</option>
            <option val="2">2</option>
            <option val="3">3</option>
            <option val="4">4</option>
            <option val="5">5</option>
        </select>
    </div>
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
</form>
(function($){
    $('#exm2').validetta({
        realTime : true
    });
});