JS Wrapper client side validation #109

Closed
nickl- opened this Issue Jan 21, 2013 · 11 comments

Comments

Projects
None yet
7 participants
Member

nickl- commented Jan 21, 2013

Retweeted this:
@phprespect: JS wrapper like PHP-Validation/examples/jquery.php at master · Dachande663/PHP-Validation · GitHub http://flip.it/JCPdo

There is always the debate to validate on the back end or on the client or both. We will gain huge Respect if we have the same solution for both.

Perhaps some v::render() or v::export() to get the same from all the rules, a js flavoured counterpart.

Something to chew on...

dbx834 commented Jun 20, 2013

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.

Owner

alganet commented Jun 26, 2013

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

Contributor

caferrari commented Jun 26, 2013

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 commented Jul 10, 2013

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 commented Jul 19, 2013

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.

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.

Member

nickl- commented Sep 23, 2013

Is it possible to merge this functionality?

Member

nickl- commented Jan 1, 2014

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

dbx834 commented Jan 1, 2014

@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.

Member

nickl- commented Jan 1, 2014

@dbx834 Awesome! You rock! =)

@augustohp augustohp added this to the Backlog milestone Feb 16, 2014

@augustohp augustohp removed the Xtra Credit label Jul 28, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment