Form Validation

Validation based in Parsley plugin. For more info and view the documentation, go to: Parsley Doc

<form id="form-validation-test1">
    <div class="row">
        <div class="col-md-12">
            <div class="bas-ui-form-group bas-ui-input-field">
                <input id="username-test1" type="text" data-parsley-minlength="6" class="form-control bas-ui-input" required>
                <label for="username-test1" data-error="Min length 6">Username</label>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="bas-ui-form-group bas-ui-input-field">
                        <input id="first_name-test1" type="text" data-parsley-minlength="3" class="form-control bas-ui-input">
                        <label for="first_name-test1" data-error="Min length 3">First Name</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="bas-ui-form-group bas-ui-input-field">
                        <input id="last_name-test1" type="text" data-parsley-minlength="3" class="form-control bas-ui-input">
                        <label for="last_name-test1" data-error="Min length 3">Last Name</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="bas-ui-form-group bas-ui-input-field">
                        <input id="password-test1" type="password" data-parsley-minlength="6" class="form-control bas-ui-input" required>
                        <label for="password-test1" data-error="Min length 6">Password</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="bas-ui-form-group bas-ui-input-field">
                        <input id="password-confirm-test1" type="password" data-parsley-minlength="6" data-parsley-equalto="#password-test1" class="form-control bas-ui-input" required>
                        <label for="password-confirm-test1" data-error="Min length 6 or Password not equal">Confirm Password</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="bas-ui-form-group bas-ui-input-field">
                        <input id="email-test1" type="email" class="form-control bas-ui-input" required>
                        <label for="email-test1" data-error="Email not valid">Email</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="bas-ui-form-group bas-ui-input-field">
                        <select id="gender-test1" class="bas-ui-select" required>
                            <option value="" disabled selected>Choose your gender</option>
                            <option value="1">Male</option>
                            <option value="2">Female</option>
                        </select>
                        <label data-error="Required">Gender</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="bas-ui-form-group bas-ui-input-field">
                        <input id="city-test1" type="text" class="form-control bas-ui-input" required>
                        <label for="city-test1" data-error="Required">City</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="bas-ui-form-group bas-ui-input-field">
                        <input id="country-test1" type="text" class="form-control bas-ui-input" required>
                        <label for="country-test1" data-error="Required">Country</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="bas-ui-form-group bas-ui-input-field">
                <input type="checkbox" id="agree-test1" data-parsley-class-handler="#agree-test1" class="bas-ui-input filled-in" required/>
                <label for="agree-test1">I agree to the terms and conditions</label>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="bas-ui-form-group bas-ui-input-field">
                <a id="form-validation-test1-submit" class="bas-ui-button bas-ui-button-primary bas-ui-waves-light">Submit</a>
            </div>
        </div>
    </div>
</form>

Sample usage

Sample usage with submit

$(document).ready(function(){
    // Validate form (Test 1)
    BasUI.Forms.addFormForSubmitValidate($('#form-validation-test1'));
    $('#form-validation-test1-submit').on('click', function(e) {
        $('#form-validation-test1').submit();
    });
});

Java Script Methods

Programmatically validations for the form and individual fiels

$(document).ready(function(){
    // Validate form (Return boolean)
    $('#form-validation-test1-submit').on('click', function(e) {
        var result = BasUI.Forms.validateForm($('#form-validation-test1'));
        console.log(result);
    });

    // Validate field (Return boolean)
    $('#form-validation-test1-submit').on('click', function(e) {
        var result = BasUI.Forms.validateField($('#username-test1'));
        console.log(result);
    });
});

Using other plugins

For using other validation plugins, set this option in custom mode

$(document).ready(function(){
    BasUI.Forms.validateLib = 'custom'; // parsley | custom
});