JS Wrapper client side validation about validation

[dbx834]

Hi,

For a recent CMS project, I created a jquery-ajax-php validator component that validates input on the client-side as well as on the server-side using the Respect/Validator. It was made to work with the bootstrap library. It is very easy to use, you just have to include validator as a class.

For example, to validate a string as alphanumeric of length 15, you would do...

<input class="validate|string|alnum|length(15)" type="text">

The jQuery-AJAX function grabs this class and the value of the input box on focus-out event (when you leave the input box) and sends it to an ajaxResponder component that parses the class string and creates a Respect validator. It then checks the value is valid or not. It returns either TRUE or an error message back to the client that can do one of the following...

1. For a correct validation, the input box would turn green ('success' class in bootstrap) with a cute little tick mark.
2. For a wrong validation, the input box would turn red ('error' class) with an error sign and a hover-popup link with info as to what has to be corrected.
3. For a validation that is partially correct, a warning ('warning' class) so to say, the input box would turn golden with an info sign and a hover-popup link with info as to what has to be corrected.
   All this is animated and looks pretty.

It is optional to disable submit button if you don't want to proceed with invalid input.

(There are also some additional goodies. There is a very powerful email-validator that checks the DNS, the MX server and dissects the email-string and checks if it is valid. There is also a separate password validator that also scores a password by a.) comparing with words in the dictionary and b.) looking at information content of the string. The password validator, is however a tad-bit slow given the many computational steps required to arrive at the score, taking upto 50-100 microseconds for each request, this part is being improved.)

I am making a demo site for this CMS component. Maybe I will share the codes once they are stable more easy to use.

I'm guessing, it might be useful to you. If there are some additional requests, I may take them up.

Best.

[alganet]

Hey @dbx834 that's awesome! I'm eager to see it working =D Let us know if you need anything!

[caferrari]

Nice! @dbx834, but I would prefer to put the validators in a data-validator property, like:

<input data-validator="validate|string|alnum|length(15)" type="text">

Its easy to get with jquery using:

$('input[data-validator]').each(function() {
    console.log($(this).data('validator'));
});

And again, very nice!

[dbx834]

Hi,

Thanks for your comments @alganet and @caferrari.

Sorry, Was away and unable to work on this further. Just came back to mountains of work, would have this in a week or two (hopefully!).

@caferrari, Did think about using the data tag but kept to using classes after discussions with other engineers that work with me. We decided to keep it this way so this works on older browsers. However, it would sure be cleaner if the data tag is used. I'll add a provision to use the data tag also.

Best.

[dbx834]

Hi,

Features

• jQuery(-AJAX)-PHP validator built on top of Respect validator
• Validate client-side and server-side with the same methods
• Easy validator description through classes
• Multiple validators of the same kind possible
• (Almost) All respect validators covered, mix and match as you please
• Lock form submission until inputs are valid
• Made to work with bootstrap warn, error and success classes for visual cues
• Simple animations provide visual cues
• Small JS function (~3kb), Smaller PHP class (2KB)
• Use same PHP class for server-side validations

Additional goodies

• Super-powerful email-validator (checks 4 parameters) [this is being improved, doc and trace messages for incorrect validations are lacking]
• Password checker checks against the english dictionary with ~6500 words for password strength and checks the information content of a string
• Define password should have so and so many features (ex. 3 min chars, 3 min ints, 1 min cap, etc...) [kind of a common thing, but useful because of being wrapped like this]

Limitations

• Needs bootstrap
• Works best, is incredibly stable and tested most with horizontal forms in bootstrap. Does work with other kinds of forms but might be glitchy.
• Validator needs to be a class [This limitation shall soon be overcome, stable usage of data tags is close]
• Slow password checker

Issues

• Respect's date validator is not yet working as well right now

Best.

[thelinuxlich]

+1

[thelinuxlich]

Interesting, but I would prefer a method to convert Respect validation rules to JSON so I could start the client-side validation(parsley, jquery-validation, etc) and avoid constant AJAX requests like your method.

[nickl-]

Is it possible to merge this functionality?

[nickl-]

@dbx834 can you submit a PR with your additions please...

[dbx834]

@nickl- Created #141 just now. Note. It's empty at this moment but I'll start cleaning and compiling my codes and committing them. I'm very busy till 12'th of Jan, expect work on this only after that.

[nickl-]

@dbx834 Awesome! You rock! =)