A basic form authentication class that allows for easy and simple form authentication. There are only a few preset option the simplest of which is required. The main functionality is provided through regex checking and callback function which make things very expandable. Bootstrap's error classes are used for styling.

  1. Configuration/ Initialisation
  2. Usage/ Examples
  3. Comments

Configuration/ Initialisation

Monstra 3.0.1    (bootstrap, jquery bundled with Monstra)

<script src=".. /form_check.js"></script>


Label Type Default Details
input_types array ['text'] Input elements that should be checked
check_textarea boolean true Include textareas in the check
regex array multiple Specify default regex expressions for use in form checks
error_msgs array multiple Default error messages for form check fails
error_div_suffix string '-error-message' The suffix to be added to the form element's id when referencing the error div

Initialisation

Place this initialisation script within your .. view.php template
You can over-ride/ build on the default values and pass variables such as I18n error messages.


<script>
    $(document).ready(function() {      
        $.monstra.form_check.init($.extend({}, { 
            input_types: ['text'], 
            error_msgs : { 
                 required: '<?php echo __('This is a required field', 'plugin') ?>',
                 format: '<?php echo __('The input is not properly formatted', 'plugin') ?>'
            }, 
        } ));
    }); 
</script> 
        

Usage/ Examples

Usage of the form checker is controlled by adding attribute tags to the form input element.


Attribute requirement Details
required optional Specifies that the input must have a value
data-form-check-regex optional Reference a regex that has been pre-defined or pass a custom regex for use.
Evaluates for TRUE, false will trigger an error.
data-form-check-callback optional Pass a javascript or jQuery function to be called and used to evaluate the content.
Evaluates for FALSE, any return will trigger an error and be used as the error message.

Form Check - Demo


<form id="test" novalidate="novalidate">
    <div class="form-group">
        <label class="control-label" for="form-input-id">Demo Label</label>
        <input type="text" id="form-input-id" name="form-input-id" value="text" class="form-control" data-form-check-regex="^[0-9a-zA-Z][0-9a-zA-Z_\-/]*[0-9a-zA-Z]+$" required="required" />            
        <span id="form-input-id-error-message" class="help-block hidden">Place holder for error message</span>        
    </div>
    <div class="form-group">
        <label class="control-label" for="form-input-id">Demo Label 2</label>
        <input type="text" id="form-input-id2" name="form-input-id2" value="" class="form-control" data-form-check-regex="^[0-9a-zA-Z][0-9a-zA-Z_\-/]*[0-9a-zA-Z]+$" required="required" />            
        <span id="form-input-id2-error-message" class="help-block hidden">Place holder for error message</span>        
    </div>
    
    <button type="submit" class="btn btn-primary">Submit</button>
</form>  
        

Comments