validate onBlur

[ej2015]

Ref #42. My attempt to enable individual inputs validation on blur.

It adds #showMessage, which is called by onBlur. To make this work, I changed the message method to always create the error element, and toggle its display properties as needed. Internally each element is created with an id ${field}-validator. #showMessage will look find the element by id and toggle its visibility.

In a typical React component, it will look something like this:

...
  handleBlur = field => (
    () => this.validator.showMessage(field)
  )
...
  <input 
     value={this.state.name} 
     onChange={this.setName}
     onBlur={this.handleBlur('name')}
  />
{validator.message('name', this.state.name, 'required|email')}
...

So far it's only working for react app. Will be happy to hear others' opinions with this approach and how to handle all the use cases here

simple-react-validator/src/simple-react-validator.js

Line 49 in 515bbd9

if (options.element === false) {

[stuyam]

Hmm yeah it's a little weird to set the display type, and use an id to find it, not very reacty and won't work for react native. I think all we need is an internal reference for each option and whether we should show messages on it yet or not.

I appreciate the contribution though this is a good first stab at making this happen! Thank you 🙏

[ej2015]

I made some changes to set internal flags through onBlur events. Yes this approach is much better. Now the usage would look like this:

...
  handleBlur = field => (
    () => {
      this.validator.showMessage(field)
      this.forceUpdate()
  })
...
  <input 
     value={this.state.name} 
     onChange={this.setName}
     onBlur={this.handleBlur('name')}
  />
{validator.message('name', this.state.name, 'required|email')}

I think it can handle all cases now, as the toggle is back where it was

simple-react-validator/src/simple-react-validator.js

Line 126 in 2415b60

if (this.messagesShown || this.visibleFields.includes(field)) {

[stuyam]

I like this approach a lot better! Nice work, I'm gonna merge this and add a method to remove a shown message.