nypd / ritsu.js

HTML form validation

ritsu.js

HTML form validation and utilities. Check out the latest release.

What is this?

A dumb and simple little HTML form validator. It relies heavily on HTML classes to make it very simple to validate input fields. Also comes with some spiffy utilities.

Why?

This all started as a need to easily validate my own forms fields without being able to use someone else's validation plug-in. The result was a mini validation library that has worked pretty well for my projects.

Perhaps someone else will find this useful.

Dependencies?

No dependencies! Uses pure javascript. Make sure to check out the browser compatibility table.

Documentation

Read the wiki. Also there is probably tons of spelling mistakes and stuff. Please let me know if you find any.

Anything else?

I'm wondering if I should switch this from a singleton approach to something else.

ritsu.js's Issues

Validating numerics with a min or max limit gives incorrect result

Doing $input.val() and $input.attr('min') returns a string, regardless if it is a number. So essentially it is doing string > string

Remove ritsu-zepto file and force jQuery to be used.

Perhaps also check for zepto aka $

Make the input border thinner for the has errror css class

Make showErrorMessages() and markInvalidFields() take optional $selectors

No Need to force the user to choose a selector and makes it consistant with the rest of the library functionality

Allow to get error message for particular input(s)

Or maybe some sort of functionality to display error messages somewhere else.

• initialize() should take a errorCallback function
• validate() should take a temp errorCallback function
• showErrorMessages() should take a temp errorCallback function maybe?
• getErrorMessage()
• getErrorMessages()
• getErrorMessagesAsMap()

Default date validation rule error

If a user specifies the min and max HTML attributes on a date input, ritsu.js will try to do number comparison with a NaN .

Numeric max and min are flip-flopped in validation

Test case: https://jsfiddle.net/b4ykh59d/3/

Max is set to 5 but you need to type in 6 or greater for it to pass validation

Mention number locales for validating numeric

isFormDirty() on file inputs return true if there is no file specified

right now when storing initialValues, if there is no file specified it is comparing '' !== undefined

Separate the actual validation into the rule.js (rename that)

This new object should be able to take an element and return if it is valid or not. the core ritsu should then decide what to do with that result.

v1.2.0 Changelog

Changes

• #66 Added ability to pass in a query string selector to all methods rather than just a jQuery object or element node
• #55
  • Added functionality to reset form inputs to their initial values from when the storeInitialValues() was ran.
  • Added functionality to retrieve the initial value of a single input element
• #61
  • initialize() now takes a messageCallback function
  • validate() now takes a messageCallback function
  • showErrorMessages() now takes a messageCallback function
  • new method to get an error message for a particular input
  • new method to get error messages for several inputs
  • new method to get error messages for several inputs as a "map"
• #71 Added version variable to the ritsu library

Fixes

• #69 When not using bootstrap styles, ritsu now removes previous error labels rather than leaving them there
• #75 (Severe) Two different copies of the rules object were present in ritsu leading to some unexpected behaviors

Wiki

• Add how one can use query selectors now when calling methods
• Add entry on how initial values are stored in the storeInitialValues()
• Add getInitialFormValue() method entry
• Add resetIntialFormValues() method entry
• Add entry on new messageCallback property in initialize()
• Add how one can reset all options to default in initialize() when calling it with a empty object
• Add new signature for the initialize() method to take a messageCallback function
• Add new signature for the validate() method to take a messageCallback function
• Add new signature for the showErrorMessages() method to take a messageCallback function
• Add new method entry getErrorMessage()
• Add new method entry getErrorMessages()
• Add new method entry getErrorMessagesAsMap()

Error messages should now reside in the rule object.

With the addition of adding new rules, we need way to specify what the error message should be.

v1.1.1 Changelog

Changes

• If bootstrap is used and a input is validated that is not a in a form group, the has-error class will be put on the input instead of throwing a null errror. #56
• Using storeInitialFormValues() on file inputs will no longer throw an error. #57

Ability to pass in an actual string selector for all methods

At the moment its just a jQuery object or an actual node element you can pass in. Would be nice to let ritsu find the element/container by an actual query selector.

jQuery Datepicker does not validate hand entered dates

When manually typing a date, the datepicker does not check for any constraints like min date or max date. It only makes sure that the input is in the correct format using contrainInput.

Perhaps ritsu should try to read the options and validate it for them, or maybe see if it can re-set the date and have it rejected by datepicker.

validate() should take an optional selector, not force one

When storing a intial value for a file input, error gets thrown

var hasSimpleFileHash = this.getAttribute('data-simple-file-hash') !== undefined;

There is no this, should be the var element instead.

Transform the wiki to a webpage using GitHub pages?

Wiki entry for file and hidden input validtion

Missing documentation for <select>'s

Incorrect logic with the data-no-past-date attribute

if(isNoPastDate && !invalidNumeric) invalidNumeric = new Date().getTime() > new Date(fieldValue);

What were you thinking bro?

Perhaps add a method to retrieve / reset the initial value of an input

Or at least document in the wiki how the initial value is stored.

If a form group has a help-block span already, ritsu removes it if the field passes validation

Consider a alpha-all rule

Or perhaps if the user has alpha or numeric validate to make sure something is filled out at least.

When a select gets validated, if nothing is selected it throws an error

Uncaught TypeError: Cannot read property 'value' of undefined at _validateSelect

Option to disable thousands separator for numerics

Add some sort of data attribute that will make validation disallow commas as the thousands separator for certain default numeric validation rules

Remove rules and validation from the global namespace

See if you can not pollute the global namespace when running tests

Change wording for min/max error messages

It currently says "between x and x" which is not correct since the beginning and ending number are inclusive in validation, not exclusive.

Add very simple email validation

No need to get crazy, just [email protected]

Remove the jQuery dependency and make it pure JavaScript

If an input is not in a form-group and it valid, exception gets thrown

  var errorElement = useBootstrap3Stlying ? _getClosestParentByClass(element, 'form-group') : element;

  var isInvalid = element.getAttribute('data-invalid') === 'true';

  if (isInvalid)
    errorElement.classList.add('has-error');
  else
    errorElement.classList.remove('has-error');

errorElement will be null therefore not be able read the property classList of null.

So basically if it can not find the form-group, use the element itself

v1.1.0 change log

Changes

• Ritsu no longer removes .error-label elements from the parent `td'
• Ability to pass in elements or jQuery selectors to all ritsu methods that take in a selector

Wiki

• Add browser compatibility chart or something
• Methods now take either an html element or jQuery selector

Update wiki to remove alpha-jquery-date and modify the numeric-date-picker

Perhaps ritsu should not validate hidden files

Maybe, not sure.

file.lastModifiedDate is deprecated

We are currently using file.lastModified, but I cant find documentation related to this property. This fileModifed is also a little wonky when trying to compare equality.

We should remove it for the next version

Perhaps add a 'alwaysRequire' configuration option.

To force every input to be required unless otherwise specified. This might need an optional class, but that might get sloppy.

Missing documentation for the `optional` class

Add testing for the entire library

Maybe Jest or QUnit.

Allow user to add additional validation

the rules should take in a alpha/numeric declarer, class name, and regex rule.

v1.1.2 Changelog

Changes

• #60 ritsu no longer validates hidden uinput

Fixes

• #62 Fixed issue where file inputs were being mark as invalid when they contained data-simple-file-hash

Add data attribute for not allowing spaces

That way several of the alpha rules can allow or disallow spaces when validating

Missing css for "error-label" labels

This only applies to non-bootstrap styling

Convert the rules.js into a modular pattern design

Completely forgot about this file

v1.0.0 Wiki updates

• alpha-only now takes in an optional data-no-space attribute to disallow spaced
• alpha-numeric now accepts spaces by default. It also takes in an optional data-no-space attribute to disallow spaces
• Removed the optional css class in favor of using a required attribute

Have the various $selector parameter methods take in a form selector

Would be much easier for someone to pass in a form object rather then select every single input in a form.

For example

var $form = $('form');
ritsu.validate($form );

vs

var $formInputs = $('form input, form textarea, form select');
ritsu.validate($formInputs);

``

• Add browser compatibility chart or something
• Ability to pass in elements or jQuery selectors

Add initial value storage for file inputs

Switch to a module pattern rather than "new function()"

Fixed in 2e3c78e

ritsu marks file input as invalid if the file is empty but was not changed

If a file input is not dirty and it it contains a data-simple-file-hash, ritsu completely ignores that and marks it as invalid anyway.