Validated Form loses submit Event Listener
wojciechgabrys opened this issue · comments
After adding react-validify and following instructions from Readme.md, inputs from validated form lost ability to send said form after pressing Enter key. Clicking on submit button (which calls <Form onSubmit={this.onSubmit} >) still works and all validation works as expected.
I've edited your example to present described problem: https://github.com/wojciechgabrys/react-validify-issue13
Is this a bug, or a desired effect and am I'm supposed to write custom event handler for pressing Enter key?
I have the repo cloned but I am confused about the steps to reproduce, so right after starting the app the form is loaded, what steps do you take exactly to produce the issue?
He’s saying he wants to be able to submit forms on enter of the last field. Is that correct? If so, we will figure out a way to do this
Ah gotcha, the default behavior for forms mostly is when you hit enter and a form field is focused it tries to submit, but runs validation beforehand (e.g. chrome will run html validation before submitting), so providing a similar onEnter hook that you can add to input fields that will call the form submit
We could also just have the onEnter added in for every input with the "name" attribute like we do with onSubmit for the submit button
I'm thinking pass in onKeyUp to the last field in the list automatically. Which will call submit when the keyCode === 13 (enter key)
How about like this:
<Form
rules={{
email: 'email|required',
password: 'required|min:8'
}}
>
<Input name="email" />
<Input name="password" type="password" onEnter={values => console.log(values)} />
<div
submit
onClick={values =>
console.log(
'this will be called if validation passes',
values
)
}
>
Submit!
</div>
</Form>Will work just like the submit div, it will only be called if it passes
Hi @audiolion & @zackify! First of all let me thank you for the great work you're both doing ❤️
He’s saying he wants to be able to submit forms on enter of the last field. Is that correct?
Basically, yes. At any moment, when I press the Enter key, the form should be validated against Form's rules and display validation errors or call onSubmit (if all validation rules pass).
The only gotcha that comes to my mind is <textarea>, which should insert a new line instead of submitting form.
@wojciechgabrys I am going to make it so you pass onEnter to the last field, or whatever fields you want to trigger a submit. If you wanted you could add it to all fields. It would be weird to me to hit enter in the middle of a form and for that to submit. But with this solution, you could do that if you wanted by adding onEnter to all of them.
@zackify I have a few forms that have optional fields at the end (and you can finish entering your data half way through the form), but adding onEnter on all of them should do the trick 👌
@wojciechgabrys https://github.com/navjobs/validify/releases/tag/2.0.4 Check it out! Should work fine. Close this if it does.
@zackify Tested it and works like a charm! 👏
Awesome, the tests say so as well 👍 haha