validity about react-use-form-state HOT 12 CLOSED

For those following the issue, v0.6.0 is now out on npm with support for global event handlers:

const [formState, inputs] = useFormState(initialState, {
  onChange(e, stateValues, nextStateValues) {
    // an input has been changed
  },
  onBlur(e) {
    // an input has lost focus
  },
  onTouched(e) {
    // an input has lost focus for the first time (will be called once)
  }
});

I'm planning on releasing input-level event handlers (or "advanced mode") in v0.7.0 as discussed here: #16 (comment)

from react-use-form-state.

I love the simplicity of the current approach to validation. This covers the majority of validation cases, which is what HTML 5 was supposed to give us, so this makes sense. However for custom validations there is no way to hook in on the per input level here. Two approaches came to my mind immediately:

Use an useEffect hook

Something like this perhaps, which would work with what exists now:

const [nameValid, setNameValid] = useState()

useEffect(() => {
  if (formState.touched.name && formState.validity.name) {
    const isValid = expensiveAsynValidation()
    setNameValid(isValid)
  }
}, [formState.touched])

You could then use the nameValid boolean for displaying whatever validation error you need. I think this is a good approach for async validations or form-level validations, perhaps ones that rely on multiple values.

Add the ability to attach to the onBlur/validityState

<input {...text('name', inputSpecificValidityFunction)} />

Something like this could be good, the ability to attach an additional function to run onBlur after HTML5 validity checks have passed. Related: it would be good to be able to attach to the onChange anyway, lots of use cases for doing something in addition to having the form state update.

from react-use-form-state.

I enjoy using this hook and I would love to see a build-in custom validation (like in your last example).

However, also a global onChange callback could be interesting? I just added to a callback to the creation of the hook as function useFormState(initialState, callback = () => { }) and triggered it on change.

Use case for this: any change of the form's inputs should reset an error message.

from react-use-form-state.

it would be good to be able to attach to the onChange anyway, lots of use cases for doing something in addition to having the form state update.

@bfillmer that's a great idea! This is currently WIP (but it's not too far away! 🎉).

A while ago I started playing with a few implementations that provide fine-grained control over certain events required by this library such as change/blur! Let me share what I've been thinking:

⚠️ For those skimming through the comment, these APIs do NOT exist yet ⚠️

In most cases, the API remains the same:

<input {...text('username'} />
<input {...radio('plan', 'free'} />

But for advanced cases, you instead pass an object as the first argument:

Side note: I prefer named parameters as opposed to adding more to the list of arguments since inputs.input_type(arg1, arg2) are currently reserved for name= and value= attributes respectively for other inputs, and adding more arguments has a potential to make the code more ambiguous.

<input
  {...text({
    name: 'username',
    // these handlers will be called after react-use-form-state is
    // done handling those events
    onChange: iAlsoWantToDoSomethingWhenThisInputChanges,
    onBlur: callMeToo,
  })}
/>

As far as custom validation is concerned, I'm still experimenting with a few ideas, but I haven't figured out a proper solution yet.

I have not decided yet between these two approaches:

• custom validation at a form level, similar to how useFormState(initialState) works
• custom validation at an input level which works great with my snippet above (I have a slight preference for this one)

<input
  {...text({
    name: 'username',
    onChange: () => {},
    onBlur: () => {},
    // Custom validation! Overrides HTML5 validation and updates `formState.validity`
    validate: ({ value }) => isUserNameValid(value),
  })}
/>

from react-use-form-state.

@wsmd Love the #dadjoke

I am digging the API of the first argument taking either a string or object with additional properties. The last variation, input level validation, makes more sense given recent experience in some large production apps. And, given hooks, you can just do something like my first example for form level validation or something async.

from react-use-form-state.

Ty!

from react-use-form-state.

Thanks for your input @bfillmer!

The simplicity that this library provides has indeed been a goal from the start. My intention was to rely on the HTML5 validation which is fairly decent, but maybe not perfect. The validity object is more of a convenience that leverages what most browsers can give us for free.

To your question, @FabianoLothor, here are a few examples:

Consider the required attribute:

<input {...text('name')} required />

// when this input left empty (after it's "touched"), the validity get:

{
  values: { name: '' },
  touched: { name: true },
  // not valid because it's marked as required but was left empty
  validity: { name: false },
}

Another example is the using the pattern attribute:

<input {...text('hex_color')} pattern="#?([0-9a-f]{3}){1,2}" />

{
  values: { hex_color: '!!notAhex' },
  touched: { hex_color: true },
  // not valid because "!!noAhex" is not a valid hex color
  validity: { hex_color: false },
}

Inputs of type email can are one other example:

<input {...email('user_email')} />

{
  values: { user_email: 'wsmd' },
  touched: { user_email: true },
  // not valid because "wsmd" is not an email
  validity: { user_email: false },
}

Nice and simple!

An interactive example is available here https://react-use-form-state.now.sh/#/demo

Other than the native form validation that we get from HTML5 or most modern browsers, react-use-form-state does not currently support custom validation.

That, however, should not prevent you from using custom validation outside of this library as the values of the inputs are accessible via formState.values at any given time. The alternative that @bfillmer suggested is one clever way of achieving this.

from react-use-form-state.

@fanick-ber I think this is a great idea! I love it! I can definitely see a use case for this where an action is required for all inputs.

I might end up with something like this:

const [formState, inputs] = useFormState(initialState, {
  onChange(e) {
    // I'm not quite sure if formState, when referenced here, is going to be the
    // state before or after the change. Does this matter? Any preference?
  }
});

Thanks for the suggestion.

from react-use-form-state.

onChange: (e, prevState, newState) => {...} perhaps? Emulates other React methods as far as state goes, and passes along the synthetic event just in case.

from react-use-form-state.

I'm looking for something to work like the Respect Validation lib for PHP. https://github.com/Respect/Validation

And until this moment I don't found anything to use on JS/React.

from react-use-form-state.

@FabianoLothor have you looked into Yup: https://github.com/jquense/yup ? I also recently came across v8n which seems pretty cool https://github.com/imbrn/v8n

from react-use-form-state.

@FabianoLothor have you looked into Yup: https://github.com/jquense/yup ? I also recently came across v8n which seems pretty cool https://github.com/imbrn/v8n

Thanks for the tip! Maybe something good to work, I am go read the API.

from react-use-form-state.