Highly effective Multilingual Type Validation Plugin – jQuery Good Validator

Yet one more jQuery-powered type validator used to validate type fields utilizing customized validation guidelines.

Options:

• A number of languages (en, ja, zh-cn, zh-tw).
• Customized guidelines utilizing Regex or JS features.
• Helps each client-side and server-side validation.
• Totally customizable and easy-to-extend.

Desk Of Contents:

The right way to use it:

1. Obtain and cargo the Good Validator plugin.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.validator.min.js?native=en"></script>

2. Validate type fields utilizing data-* attributes:

• ; – AND
• : – separate fields from guidelines
• () – used to move rule parameters
• , – used to separate a number of guidelines
• ~ – vary
• & – AND
• ! – not equal to
• | – OR

<type class="type" data-validator-option="{well timed:2, focusCleanup:true}">
  <div class="form-item">
    <label class="label">Username</label>
    <enter sort="textual content" title="username"
      data-rule="required;username;"
      data-rule-username="[/^[wd]{3,12}$/, 'Please enter 3-12 digits, letters, underscores']"
      data-tip="You should utilize letters, numbers and durations"
    >
  </div>
  <div class="form-item">
    <label class="label">Password</label>
    <enter sort="password" title="pwd"
      data-rule="Password: required; size(8~16)"
      data-tip="Please fill in no less than eight characters"
    >
  </div>
  <div class="form-item">
    <label class="label">Confirm Password</label>
    <enter sort="password" title="pwdAgain" data-rule="Confirm Password: required; match(pwd)">
  </div>
  <div class="form-item">
    <label class="label">Gender</label>
    <choose title="gender" data-rule="required">
      <possibility worth="">choose ...</possibility>
      <possibility worth="1">Male</possibility>
      <possibility worth="2">Feminine</possibility>
      <possibility worth="3">Different</possibility>
    </choose>
  </div>
  <div class="form-item">
    <label class="label">Electronic mail</label>
    <enter sort="textual content" title="e mail" data-rule="required;e mail">
  </div>
  <div class="form-item">
    <label class="label">Curiosity</label>
    <label><enter sort="checkbox" title="curiosity" data-rule="checked">sports activities</label>
    <label><enter sort="checkbox" title="curiosity">film</label>
    <label><enter sort="checkbox" title="curiosity">recreation</label>
  </div>
  <div class="form-item">
    <label class="label">Word</label>
    <textarea data-rule="required;"></textarea>
  </div>
  <div class="form-item">
    <label><enter sort="checkbox" id="agree_arguments" data-rule="checked">I comply with the service settlement.</label>
  </div>
  <div class="form-item">
    <button sort="submit">Submit</button>
  </div>
</type>

3. Or through JavaScript.

$('#type').validator({
  fields: {
    'e mail': 'required;e mail',
    'pwd': 'required;size(6~16)',
    // ...
  }
});

4. Constructed-in validation guidelines:

• required: required discipline
• checked: checked(n), checked(n~), checked(~n), checked(n1~n2)
• match: match(title), match(neq, title), match(lt, title), match(gt, title), match(lte, title), match(gte, title), match(gte, title, date), match(gte, title, datetime)
• distant: distant(URL), distant(get:URL), distant(URL, name1, #id2 …), distant(URL, foo=value1&bar=value2, name3 …), distant(URL, foo:name1, bar:#id2, name3 …), distant(jsonpURL), distant(jsonp:URL), distant(cors:put up:URL)
• integer: integer(+), integer(+0), integer(-), integer(-0)
• vary: vary(n~), vary(~n), vary(n1~n2), vary(n1~n2, false)
• size: size(n), size(n~), size(~n), size(n1~n2), size(n~, true)
• filter: filter(RegExp)

5. Create customized guidelines:

// en.js
$.validator.config({
  // Customized guidelines
  guidelines: {
    // ...
  },
});

// or
$("#type").validator(
  guidelines: {
    // ...
  }
);

// or through knowledge attribute
<enter title="demo" data-rule="required;xxx" data-rule-xxx="[/^d{6}$/, '6 digits']">

// or through JS perform
cell: perform(ingredient, params) {
    return /^1[3458]d{9}$/.take a look at(ingredient.worth) || 'Cellphone Quantity Validator';
};

// utilizing take a look at perform
loginName: perform(ingredient) {
  return /^[a-zA-Z]w{3,}/.take a look at(ingredient.worth) ||
    this.take a look at(ingredient, "cell")===true ||
    this.take a look at(ingredient, "e mail")===true ||
    'Enter username, cellphone quantity, or e mail';
}

// customized ajax validation
myRemote: perform(ingredient){
  return $.ajax({
    url: 'verify/username.php',
    sort: 'put up',
    knowledge: ingredient.title +'='+ ingredient.worth,
    dataType: 'json'
  });
}

6. Obtainable plugin choices:

$("#type").validator(
  // 1 = allow debug
  // 2 = ignore validation outcome
  debug: 0,
  // 0: validate the shape on submit
  // 1: validate the sphere when lose focus
  // 2: validate the sphere when the worth has modified
  // 3: 1+2
  // 8: validate the sphere when the worth has modified and present the outcome
  // 9: 1+2 and present the outcome
  well timed: 1,
  // theme title
  theme: 'default',
  // ignore type fields
  ignore: '', 
  // ignore empty fields
  ignoreBlank: false,
  // transfer focus to the primary invalid discipline
  focusInvalid: true,
  // clear error message when the sphere bought focus
  focusCleanup: false,
  // cease the plugin when the primary error is captured
  stopOnError: false,
  // default CSS courses
  formClass: 'n-default',
  validClass: 'n-valid',
  invalidClass: 'n-invalid',
  bindClassTo: null,
  // present success messages
  showOk: true,
  // customized error messages
  msgWrapper: 'span',
  msgArrow: '',
  msgIcon: '<span class="n-icon"></span>',
  msgClass: 'n-right',
  msgStyle: '',
  messages: {
    required: "Please fill on this discipline",
    e mail: "Please enter a legitimate e mail deal with.",
    // ...
  },
  msgMaker: perform(decide) {
    var html;
    html="<span position="alert" class="msg-wrap n-"+ decide.sort + '">' + decide.arrow;
    if (decide.outcome) {
      $.every(decide.outcome, perform(i, obj){
        html += '<span class="n-'+ obj.sort +'">' + decide.icon + '<span class="n-msg">' + obj.msg + '</span></span>';
      });
    } else {
      html += decide.icon + '<span class="n-msg">' + decide.msg + '</span>';
    }
    html += '</span>';
    return html;
  },
  // customized show
  show: perform(elem) {
    // ...
  },
  // perform(elem) | jqSelector
  goal: null,
  // apply choices & validators to fields
  fileds: {
    // ...
  }
  // translate ajax response to validation outcome
  dataFilter: perform (knowledge) {
    if ( isString(knowledge) || ( isObject(knowledge) && ('error' in knowledge || 'okay' in knowledge) ) ) {
      return knowledge;
    }
  },
  // callbacks
  beforeSubmit: perform(type) {
    // ...
  },
  legitimate: perform(type) {
    // ...
  },
  invalid: perform(type, errors) {
    // ...
  },
  validation: perform(type) {
    // ...
  },
  msgShow: perform($msgbox, sort) {
    // ...
  },
  msgHide: perform($msgbox, sort) {
    // ...
  },
);

7. API strategies:

// clear messages
$('#type').validator("cleanUp");

// destroy the plugin
$('#type').validator("destroy");

// verify if is legitimate
$('#discipline').isValid(perform(v){
  if (v) {
   // do one thing
  }
});

// replace choices
$.validator.config({
  // choices right here
});

// set theme
$.validator.setTheme("myTheme", {
  // choices right here
});

// take a look at validation rule
$('#type').take a look at(elem, rule);

// set type discipline
$('#type').setField(key, discipline);
$('#type')..setField(obj);

// present/cover messages
$('#type').showMsg(elem, obj);
$('#type').hideMsg(elem);

// forestall duplicate submit
$('#type').holdSubmit(maintain);

8. Occasions:

$('#type').on('validation', perform(e, present){
  // do one thing...
});

$('#type').on('legitimate.type', perform(e, type){
  // do one thing...
});

$('#type').on('invalid.type', perform(e, type, errors){
  // do one thing...
});

$('#username').on('legitimate.discipline', perform(e, outcome){
  // do one thing...
});

$('#username').on('invalid.discipline', perform(e, outcome){
  // do one thing...
});

$('#username').on('legitimate.rule', perform(e, ruleName){
  if (ruleName === 'distant') {
    // do one thing...
  }
});

$('#username').on('invalid.rule', perform(e, ruleName){
  if (ruleName === 'distant') {
    // do one thing...
  }
});

This superior jQuery plugin is developed by niceue. For extra Superior Usages, please verify the demo web page or go to the official web site.