taurus_simple_vue_validation

vuejs plugin based validation

This is a simple form validation plugin for vuejs,

To get started import taurus_simple_vue_validation:

import validation from 'taurus_simple_vue_validation';

the following plugin options are available (currently showing default):

Vue.use(Plugin, {
  feedback: { //sets feedback message on controls (the message is overrideable)
    valid: true, 
    invalid: true
  },
  control: { //sets input validation (control border color)
    valid: true, 
    invalid: true
  }
})

Basic form control setup as follows:

<label for="myControl">Control Label</label>
  <input type="text"
          id="myControl"
          fieldlabel="My Controls feeback name"
          placeholder="DD/MM/YYYY"
          v-model="myModel"
          v-taurus-validator="'required|date_format:DD/MM/YYYY'"
          class="form-control"/>
<div name="myControl"></div>

Ensure every control that you want validated has an id, fieldlabel and v-taurus-validator attributes. The feedback div requires a name attribute equal to the id of the control (the control must not have a name attribute!).

Rules are always entered into the v-taurus-validator attribute. Every rule is seprated by a | pipe and any rule that requires an additional parameter is seperated by a colon i.e: date_format:DD/MM/YYYY or max:5

required_if rule requires bit more heres an example: required_if:vatRegistered,true, to break this down you have the parameter: vatRegistered this is the name of another control model within the same form. You can then add any data the model is required to have via comma seperated list in this case: ,true

If you have set feedback option to true (is true by default) the feedback messages displayed below the control can be overridden via a html tag, these are as follows: invalidfeedback and validfeedback. The data entered will replace the default error/valid feedback messages.

<div name="myControl" validfeedback="Custom valid message" invalidfeedback="Custom invalid message"></div>

To invoke validation check call the validation mixin -- checkForm() --, this will run validation on the form.

methods: {
  submitForm() {
    if(this.checkForm){
      ...//valid action
    } else {
      ...//invalid action
    }
  }
}

To get the current list of errors you will need to call -- formErrors() -- This return an array of current errors

this.formErrors()

To reset validation messages call -- resetFeedback -- This will empty any current errors and reset validation back to an untouched state.

this.resetFeedback()

The current validation rules:

• date_format:(format)
• max:(n)
• min(n)
• monthYear
• numeric
• required_if:(otherField)
• required
• same_as