FormsySelect required is not showing any error when submit the form

[alienriquebm]

Hi, i need to show a messge when the user hits the submit button and a value on the FormsySelect are not selected (similar to a text field behavior).

If i use:

validationErrors={{ isDefaultRequiredValue: "Your error message when field is required", }}

The error is displayed, but inmeddiatly when the component is loaded.

Is there a way to do this validation when user hits the submit error?
Thanks a lot

[ryanblakeley]

Use the required prop along with requiredError. validationError pairs with the prop validations.

[alienriquebm]

Hi, thanks a lot for your great work and for read this. I'm a fraid that i don´t understand. Can you please give me a short sample?

[ryanblakeley]

Instead of

validations={{ yourErrorName: (data, value) => return !!value }}
validationErrors={{ yourErrorName: 'Error message' }}

use

required={true}
requiredError={'Required error messsage'}

[alienriquebm]

This show a error:

Unknown prop requiredError on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop...

This is my code:

                <FormsySelect
                  name="patientFound" 
                  value={this.props.item.patientFound}
                  floatingLabelText="Fue encontrado *"
                  fullWidth={true}
                  onChange={this.handleChangedInput}
                  required={true}
                  requiredError={'Required error messsage'}
                >
                {this.state.patientFound.map((item, index) => <MenuItem key={index} value={item} primaryText={item} />)}
                </FormsySelect>

[alienriquebm]

@rojobuffalo can you help me please? :(

[ryanblakeley]

@aebmknrl The error you're seeing is just something we need to patch by deconstructing required from props. There are other vars deconstructed here: https://github.com/rojobuffalo/formsy-material-ui/blob/master/src/FormsySelect.jsx#L43, then ...rest gets passed to the Material component. If we add required there, it won't get passed through to a <div> and that warning will go away.

Before we add that fix though, I want to be sure the required and requiredError behavior will work on this type of field. Is this error breaking your app or is it just putting a message in the console without any other side-effects? If no side-effects, is the form validation behaving as expected?

[alienriquebm]

@rojobuffalo Is not breaking the code, just a warning. The only strange thing that i see is this:

This field is mark as required...
Now, on Formsy.Form component i have:

        <Formsy.Form
          name="patientEvaluation"
          onValidSubmit={this.handleSubmitForm}
          >

This form only will be submited if is valid... but, if i left my FormsySelect without any value, then the form is submited too. Very strange.

[ryanblakeley]

@aebmknrl ok, good to know. It's possible that support for required on a Select component was intentionally left off at one point. But I see no reason why we can't patch it. PRs welcome. I can't look at it right away, but will get around to it if no one submits a PR.

[alienriquebm]

Well... i would really like to help you with a PR, but i'm affraid that i will messed up your great code xD
I hope that you can help me with this soon. Please, don't forgett me @rojobuffalo. And thanks a lot for you attention.