Home WebriQ App Bar
Tool Bar
Webriq logo

© WebriQ

Free & Open Source (MIT)
Notifications
View All

Form Validation

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

Submit 

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


<form id="form-validation-test1">
    <div class="row">
        <div class="col-md-12">
            <div class="eq-ui-form-group eq-ui-input-field">
                <input id="username-test1" type="text" data-parsley-minlength="6" class="form-control eq-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="eq-ui-form-group eq-ui-input-field">
                        <input id="first_name-test1" type="text" data-parsley-minlength="3" class="form-control eq-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="eq-ui-form-group eq-ui-input-field">
                        <input id="last_name-test1" type="text" data-parsley-minlength="3" class="form-control eq-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="eq-ui-form-group eq-ui-input-field">
                        <input id="password-test1" type="password" data-parsley-minlength="6" class="form-control eq-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="eq-ui-form-group eq-ui-input-field">
                        <input id="password-confirm-test1" type="password" data-parsley-minlength="6" data-parsley-equalto="#password-test1" class="form-control eq-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="eq-ui-form-group eq-ui-input-field">
                        <input id="email-test1" type="email" class="form-control eq-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="eq-ui-form-group eq-ui-input-field">
                        <select id="gender-test1" class="eq-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="eq-ui-form-group eq-ui-input-field">
                        <input id="city-test1" type="text" class="form-control eq-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="eq-ui-form-group eq-ui-input-field">
                        <input id="country-test1" type="text" class="form-control eq-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="eq-ui-form-group eq-ui-input-field">
                <input type="checkbox" id="agree-test1" data-parsley-class-handler="#agree-test1" class="eq-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="eq-ui-form-group eq-ui-input-field">
                <a id="form-validation-test1-submit" class="btn btn-primary eq-ui-waves-light">Submit</a>
            </div>
        </div>
    </div>
</form>

Sample usage

Sample usage with submit


$(document).ready(function(){
    // Validate form (Test 1)
    EqUI.forms.add_form_for_submit_validate($('#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 = EqUI.forms.validate_form($('#form-validation-test1'));
        console.log(result);
    });

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

Using other plugins

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


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