i18n + bootstrap prompt + compare and check rules

[janez89]

added i18n support

• i18n/verify.en.js - embedded english language
• i18n/verify.hu.js - hungarian language

Use of other languages:

<script src="i18n/verify.[LANG].js"></script>
<script src="verify.[dist].js"></script>

added prompt for bootstrap form

Usage: $.verify({ bootstrapPrompt: true });

<form>
<div class="control-group">
<label class="control-label" for="input">Label</label>
<div class="controls">
<input type="text" id="input" data-validation="required">
<span class="help-inline"></span>
</div>
</div>
</form>

http://getbootstrap.com/2.3.2/base-css.html#forms

added compare rule

usage: compare(jQuerySelector field, Label)

<input type="password" id="password" data-validation="required">
<input type="password" data-validation="required,compare(#password, Password)">

added check rule

usage: check(url, Error message) Important: The response should be a json object and must include a field 'err' or 'error'. { err: false} OR { error: false }

<input type="text" name="username" data-validation="required,check(/check.php?username=%s, The username is already in use)"> 

added compare tests

[jpillora]

Hi Janez,

Thanks for the PR! However, I'm actually half way through refactoring the rule system. Have a look through this directory structure:

https://github.com/jpillora/verifyjs/tree/866e3e7177766c8e24225109f20927a9cafe3348/src/rules/core

This branch, along with an upgrade to the website, will allow you to pick and choose validation modules and compile a custom version using only the rules that you need. For example rules / date / date.js contains the date validations and you'll be able to toggle it on and off. Languages will just be another module you can turn on and off.

Also, each rule will be preceeded by a simple documentation DSL, utilising dox to both generate the web page documentation and the module choosing tool, and to provide simple tests:

  $.verify.addFieldRules({
    /**
     * Ensures a valid email address
     * @name email
     * @type field
     * 
     * @valid dev@jpillora.com
     * @invalid devjpillora.com
     * @invalid dev@jpillora.c
     */
    email: {
      regex: /^(([^<>()\[\]\\.,;:\s@\"]+(\.[^<>()\[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
      message: "Invalid email address"
    },

Also languages will can be simply applied using updateRules, for example a french version of email might look like:

  $.verify.updateRules({
    email: {
      message: "Adresse email invalide"
    },

The testing suite will run each invalid/valid directive as it's own test and assert fail/pass respectively.

I'll definitely add a hungarian language file and your added rules, and a rule to do simple async GETs is a good idea.

Will leave this open so it's not forgotten :+1:

Comments and suggestions welcome!

[jpillora]

Also, RE: Bootstrap, see http://notifyjs.com. Bootstrap is the default style and I'll be swapping over to that style with the refactor.

[janez89]

Thanks for your response.

I was thinking during the bootstrap: http://i.imgur.com/01TOOar.png I'm not like notify.js floating solution on the mobile.

I'm glad that I could contribute to the development.

[jpillora]

Ah yes, you can achieve what you're after with http://verifyjs.com/#how-to-option errorContainer errorClass. Set errorContainer to the parent .control-group. Though I might still need to add a successClass or you could use a :not(.error) selector?

[jpillora]

The problem is that everyone's layout and class names could be quite different, so we can't really hard code specifically: sibling .inline-help classes (element.siblings(".help-inline").html(text || '');). With this refactor, I could add a module which automatically configures a standard bootstrap application, though it's too specific to go in the core module.

[janez89]

Okey. You're right. I think I overlooked this: http://verifyjs.com/#how-to-option