FormValidator Samples - InkJS

FormValidator #1 - Default Markup

Select at least one option

Please select one option

<form id="myform" class="ink-form" method="post" action="#">
    <fieldset>
        <div class="control-group required">
            <label for="name">Name:</label>
            <div class="control">
                <input type="text" name="name" id="name" class="ink-fv-required" />
            </div>
        </div>
        
        <div class="control-group required">
            <label for="mail">Email:</label>
            <div class="control">
                <input type="text" name="mail" id="mail" class="ink-fv-required ink-fv-email" />
            </div>
        </div>
        
        <div class="control-group required">
            <label for="pass">Password: </label>
            <div class="control">
                <input type="password" name="pass" id="pass" class="ink-fv-required ink-fv-confirm" />
            </div>
        </div>
        
        <div class="control-group required">
            <label for="confpass">Confirm Password:</label>
            <div class="control">
                <input type="password" name="confpass" id="confpass" class="ink-fv-required ink-fv-confirm" />
            </div>
        </div>
        
        <div class="control-group required">
            <p class="label">Please select one option</p>
            <ul class="control unstyled">
                <li><input type="radio" name="radio1" id="radio1_g" value="1" class="ink-fv-required" /> <label for="radio1_g">radio 1</label> </li>
                <li><input type="radio" name="radio1" id="radio2_g" value="2" class="ink-fv-required" /> <label for="radio2_g">radio 2</label> </li>
                <li><input type="radio" name="radio1" id="radio3_g" value="3" class="ink-fv-required" /> <label for="radio3_g">radio 3</label> </li>
            </ul>
        </div>
    </fieldset>
    <div>
        <input type="submit" name="sub" value="Submit" class="ink-button success" />
    </div>
</form>
<script>
Ink.requireModules(['Ink.Dom.Selector_1','Ink.Dom.Event_1','Ink.UI.FormValidator_1'],function(Selector,Event,FormValidator){
    Event.observe(Ink.s('#myform'),'submit',function( event ){
        Event.stop(event);
        FormValidator.validate(this);
    });
});
</script>