Validator

Example-1

This is an example of simple validation without output messages, events, ajax functions etc...

/**
 * Example-1
 * The example of simple validation
 */

$(function() {
  $('#example-1').validator({
    filters: {
      '.login': 'required | login | min:3',
      '.pass':  'required | min:3',
      '.email': 'required | email'
    }
  });
});

Example-2

In this example you can see output messages for valid and invalid values.

/**
 * Example-2
 * The example of validation with messages
 */

$(function() {
  var messages = [
    {
      el: '.login-2',
      valid: 'Good!',
      invalid: [
        {
          filter: 'required',
          text: 'Login must be required'
        },
        {
          filter: 'login',
          text: 'Login contains chars, digits, "." and "_"'
        },
        {
          filter: 'min',
          text: 'Minimal length is 3 symbols'
        }
      ]
    },
    {
      el: '.pass-2',
      valid: 'Good!',
      invalid: [
        {
          filter: 'required',
          text: 'Password must be required'
        },
        {
          filter: 'min',
          text: 'Minimal length is 3 symbols'
        }
      ]
    },
    {
      el: '.email-2',
      valid: 'Good!',
      invalid: 'Email isn\'t correct!'
    }
  ];

  $('#example-2').validator({
    filters: {
      '.login2': 'required | login | min:3',
      '.pass2':  'required | min:3',
      '.email2': 'required | email'
    },
    messages: messages
  });
});

Example-3

This example uses ajax and shows mark instead of text message

/**
 * Example-3
 * The example of validation with ajax and messages,
 * but valid and invalid is a function, not a string.
 */

$(function() {
  var messages = [
    {
      /**
       * If input value is valid you can add preloader
       * and send data to the server that check this
       * value on uniq in data base. To do it you must
       * write ajax function here.
       */
      valid: function() {
        showSuccessIcon('.login-3');
      },
      invalid: function() {
        /**
         * You can also print an error message here
         */
        showErrorIcon('.login-3');
      }
    },
    {
      valid: function() {
        showSuccessIcon('.pass-3');
      },
      invalid: function() {
        showErrorIcon('.pass-3');
      }
    },
    {
      valid: function() {
        showSuccessIcon('.email-3');
      },
      invalid: function() {
        showErrorIcon('.email-3');
      }
    }
  ];

  var ajax = {
    success: function() {
      showStatus('success');
    },
    error: function() {
      showStatus('error');
    }
  };

  $('#example-3').validator({
    autoClear: false,
    filters: {
      '.login3': 'required | login | min:3',
      '.pass3':  'required | min:3',
      '.email3': 'required | email'
    },
    ajax: ajax,
    messages: messages
  });
});

Example-4

In this example you can see how the keyup events work.

/**
 * Example-4
 * In this example validation work with messages, ajax and events
 */

$(function() {
    var messages = [
    {
      el: '.login-4',
      valid: 'Good!',
      invalid: [
        {
          filter: 'required',
          text: 'Login must be required'
        },
        {
          filter: 'login',
          text: 'Login contains chars, digits, "." and "_"'
        },
        {
          filter: 'min',
          text: 'Minimal length is 3 symbols'
        }
      ]
    },
    {
      el: '.pass-4',
      valid: 'Good!',
      invalid: [
        {
          filter: 'required',
          text: 'Password must be required'
        },
        {
          filter: 'min',
          text: 'Minimal length is 3 symbols'
        }
      ]
    },
    {
      el: '.email-4',
      valid: 'Good!',
      invalid: 'Email isn\'t correct!'
    }
  ];

  var ajax = {
    success: function() {
      showStatus('success');
    },
    error: function() {
      showStatus('error');
    }
  };

  var events = { 'keyup': true }; //you can add more events

  $('#example-4').validator({
    autoClear: false,
    filters: {
      '.login4': 'required | login | min:3',
      '.pass4':  'required | min:3',
      '.email4': 'required | email'
    },
    ajax: ajax,
    events: events,
    messages: messages
  });
});

Example-5

This example demonstrates the work of equal filter

/**
 * Example-5
 * In this example we can see how to work with "equal" filter
 */

$(function() {
  messages = [
    {
      el: '.pass-51',
      valid: 'Good!',
      invalid: [
        {
          filter: 'required',
          text: 'Password must be required'
        },
        {
          filter: 'equal',
          text: 'Passwords don\'t equal'
        }
      ]
    },
    {
      el: '.pass-52',
      valid: 'Good!',
      invalid: [
        {
          filter: 'required',
          text: 'Password must be required'
        },
        {
          filter: 'equal',
          text: 'Passwords don\'t equal'
        }
      ]
    }
  ];

  $('#example-5').validator({
    filters: {
      '.pass51': 'required | equal:.pass52',
      '.pass52': 'required | equal:.pass51'
    },
    messages: messages
  });
});

Example-6

In this example you can see how to use 'callbacks' options and write your own filters. The filter is named 'MoreThan10' thus you should write a number > 10 or you'll get an error. Read more about using it in README.md on github or see 'src/example-6.js' to understand it better.

/**
 * Example-6
 * The example of validation with
 * our filter which we add using 'callbacks' option
 */

$(function() {
  var messages = [
    {
      el: '.number-1',
      valid: 'Good!',
      invalid: 'Number must be more than 10'
    }
  ];

  var ajax = {
    success: function() {
      showStatus('success');
    },

    error: function() {
      showStatus('error');
    }
  };

  /**
   * There are our callbacks function
   */
  var callbacks = {
    MoreThan10: function(val, $el) {
      //$el is an input
      return val > 10;
    }
  };

  $('#example-6').validator({
    autoClear: false,
    filters: {
    /**
     * You can use more callbacks
     * callback:first | callback:second | callback:third | etc...
     */
      '.number': 'callback:MoreThan10',
    },
    ajax: ajax,
    messages: messages,
    callbacks: callbacks
  });
});

Example-7

If you write a guest book or a forum then your users can write his own messages, so you must protect your site. Validator gives you 'xss' processing-filter which proccess value of textarea field and you can use this data in 'after' or 'before' functions (See the details below).

/**
 * Example-7
 * The example of validation with
 * xss protection. We save html-tags but they don't execute when
 * we put them into html
 */

$(function() {
  var ajax = {
    success: function() {
      showStatus('success');
    },
    error: function() {
      showStatus('error');
    }
  };

  var events = { 'keyup': true };

  $('#example-7').validator({
    autoClear: false,
    filters: {
      '#text': 'xss | required'
    },
    /**
     * Text was processed by filter 'xss'
     */
    after: function(text) {
      $('.textarea-message').html(text);
    },
    ajax: ajax,
    events: events
  });
});

Example-8

Validator also gives you 'eraseTags' processing-filter which can be used for deleting all html-tags. If you need a filter for deleting all bbCode you should write it yourself. You can rename original function 'eraseTags' to 'eraseBBCode' and modify it for using it as a callback : '.textarea': 'callback:eraseBBCode'.

/**
 * Example-8
 * The example of validation with 'eraseTag' filter
 */

$(function() {
  var ajax = {
    success: function() {
      showStatus('success');
    },
    error: function() {
      showStatus('error');
    }
  };

  $('#example-8').validator({
    autoClear: false,
    filters: {
      '#text2': 'eraseTags | required'
    },
    /**
     * Text was processed by filter 'eraseTags'
     * We courageously put it into html
     */
    after: function(text) {
      $('.textarea-message2').html(text);
    },
    ajax: ajax
  });
});

Example-9

This example shows how events 'after' and 'before' with ajax events 'success' and 'error' work. You can do anything in ajax functions, but you'll probably want to do something in them 'before' (or 'after') validation and send data to server.

/**
 * Example-9
 * The example of validation with using 'before' and 'after' options
 */

$(function() {
  var ajax = {
    success: function() {
      alert('Success');
    },
    error: function() {
      alert('Error');
    }
  };

  $('#example-9').validator({
    autoClear: false,
    before: function() {
      alert('Before filter!');
    },
    after: function() {
      alert('After filter!');
    },
    filters: {
      '.pass9': 'required'
    },
    ajax: ajax
  });
});

Example-10

In this example we use radio and checkbox button. You can validate even these html elements with Validator!

/**
 * Example-10
 * There is we are using checkboxes and radio buttons.
 */

$(function() {
  $('#example-10').validator({
    autoClear: false,

    filters: {
      '#select-value':   'required',
      '.checkboxbutton': 'required',
      '.radiobutton':    'required'
    },

    messages: [
      {
        el: '.select-message',
        valid: 'Good!',
        invalid: 'Choose select value'
      },
      {
        el: '.checkboxes-message',
        valid: 'Good!',
        invalid: 'Choose checkbox'
      },
      {
        el: '.radious-message',
        valid: 'Good!',
        invalid: 'Choose radio'
      }
    ],

    ajax: {
      success: function() {
        showStatus('success');
      },
      error: function() {
        showStatus('error');
      }
    }
  });
});

Example-11

This is a simple function for determining password's complexity. It's not a default processing-filter, it was written with use 'callback' filter which takes one parameter. You have to write similar function by yourself . You set the callbacks option and take your callback functions to it for using it as a filter later.

/**
 * Example-11
 * The example of using callbacks option
 */

$(function() {
  var ajax = {
    success: function() {
      showStatus('success');
    },
    error: function() {
      showStatus('error');
    }
  };

  var callbacks = {
    passAdvise: function(val, $el) {
      var complexity;
      var chars = /[a-zA-Z]+/;
      var digits = /[0-9]+/;
      var special = /[@#%\!\$\^\&\(\)\[\]\{\}\*\+\.]+/;

      if (chars.test(val) || digits.test(val) || special.test(val)) complexity = 'Eazy'
      if (chars.test(val) && digits.test(val)) complexity = 'Medium'
      if (chars.test(val) && digits.test(val) && special.test(val)) complexity = 'Hard'

      alert(complexity);
      if (complexity === 'Eazy' || complexity === 'Medium') return false; //Stop validate
      return true; //continue validate
    }
  };

  $('#example-11').validator({
    autoClear: false,
    filters: {
      '.pass-hard': 'callback:passAdvise | required'
    },
    ajax: ajax,
    callbacks: callbacks
  });
});

• If password you typed contains only characters and is not complex, the password will be rejected.
• If password you typed contains only characters or digits and is not complex, the password will be rejected.
• If password you typed contains at least one character, one special symbol. one digit symbol, it will be sent to the server

Example-12

This example uses "setter" option and shows how to change optinos on the fly

/**
 * Example-12
 * If you want to change validator options on
 * the fly you need use it.
 */

$(function() {
  var ajax = {
    success: function() {
      showStatus('success');
    },
    error: function() {
      showStatus('error');
    }
  };

  var setter = function() {
    var type = $('.radiomethod:checked').val();
    type = type.toLowerCase();

    return {
      ajax: (type === 'ajax') ? ajax : null
    }
  }

  $('#example-12').validator({
    filters: {
      '.login12': 'required'
    },
    setter: setter
  });
});

OTHER INPUT FORMS

There are other form inputs as color, file, etc... Validator gives you filters for all html input elements.

/**
 * Other form input
 */

$('#other-form-input').validator({
  autoClear: false,
  filters: {
    '.file':  'required | image',
    '.color': 'required | color',
    '.date':  'required | date',
    '.time':  'required | time'
  },
  ajax: ajax,
  messages: messages
});

About plugin

I like validation in Laravel framework. I thought it would be nice if I could use validation like the one in Laravel framework on the frontend-side.

/**
 * This is example of Validator in Laravel
 */

$validator = Validator::make(
    ['name' => 'Dayle'],
    ['name' => 'required|min:5']
);

/**
 * Jquery-Validation
 * http://jqueryvalidation.org/
 */

$('#form').validate();

I'll think about adding it. Probably you like the Jquery-Validation more than Validator. Honestly I never used the "Jquery-Validation" and I don't know how it works and what provides.

Contact