Input validation - react form submitting without any values

Question

I'm having an input validation problem thats allowing the form to submit without having any selectorValues added. The check I have seems to only check for input inside the textarea but doesn't account for the Add button being pressed.

Here's a sandbox reproducing the issue.

I'm using Semantic-ui-react so my <Form.Field /> looks like this:

<Form.Field required>
  <label>Selector Values:</label>
  <TextArea
    type="text"
    placeholder="Enter selector values 1-by-1 or as a comma seperated list."
    value={this.state.selectorValue}
    onChange={this.handleSelectorValueChange}
    required={!this.state.selectorValues.length}
  />
  <Button positive fluid onClick={this.addSelectorValue}>
    Add
  </Button>
  <ul>
    {this.state.selectorValues.map((value, index) => {
      return (
        <Card>
          <Card.Content>
            {value}
            <Button
              size="mini"
              compact
              floated="right"
              basic
              color="red"
              onClick={this.removeSelectorValue.bind(this, index)}
            >
              X
            </Button>
          </Card.Content>
        </Card>
      );
    })}
  </ul>
</Form.Field>

So in the above, <TextArea> has a required prop: !this.state.selectorValues.length. This is only checking for input inside the textarea, it should check that the value has been added by pressing the Add button before allowing the form to submit.

Do you want to prevent adding empty values to selectorValues ? or there is something else ? — Asaf Aviv
– Asaf Aviv, Commented Apr 24, 2019 at 21:48
My answer will prevent adding empty values but i'm not sure i get what else is the problem can you explain what else needs to be fixed ? — Asaf Aviv
– Asaf Aviv, Commented Apr 24, 2019 at 21:51
If you start typing a value into the text box and hit submit it allows the form to be submitted without the value actually having to be added via the button. — DJ2
– DJ2, Commented Apr 24, 2019 at 21:54

Asaf Aviv · Accepted Answer · 2019-04-24 22:06:33Z

1

In your addSelectorValue add a check to see if this.state.selectorValue it not empty, if it is just return, this will prevent adding empty values to selectorValues

addSelectorValue = e => {
    e.stopPropagation();
    e.preventDefault();

    if (!this.state.selectorValue) return;
    //continue if this.state.selectorValue has a value
};

Before submitting add a check to see if this.selectorValues is empty, if so focus on textarea.

To focus we need to first create a ref to our textarea.

Create a ref to be attached to a dom element

textareaRef = React.createRef();

// will use our ref to focus the element
focusTextarea = () => {
  this.textareaRef.current.focus();
}

handleSubmit = () => {
  const { selectorValues } = this.state;
  if (!selectorValues.length) {
    // call our focusTextarea function when selectorValues is empty
    this.focusTextarea();
    return;
  }
  this.setState({ submittedSelectorValues: selectorValues });
};

// attach our ref to Textarea
<Textarea ref={this.textareaRef} />

edited Apr 24, 2019 at 22:06

answered Apr 24, 2019 at 21:38

Asaf Aviv

11.8k2 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DJ2 Over a year ago

This does work. Is there a way to make it an alert focused on the input in question instead of a browser alert? I will probably need a schema validation like yup to achieve this.

Asaf Aviv Over a year ago

I've edited my answer to focus our Textarea when handling validation

xadm · Accepted Answer · 2019-04-24 22:22:56Z

1

After some search ... required prop is for decorational purposes only - adding astrisk to field label.

It has nothing to form validation. You need a separate solution for that - try formik or set some condition within submit handler.

Formik plays nicely with yup validation schema - suitable for more complex, dynamic requirements.

edited Apr 24, 2019 at 22:22

answered Apr 24, 2019 at 21:51

xadm

8,4463 gold badges17 silver badges27 bronze badges

1 Comment

DJ2 Over a year ago

<Form> from semantic ui react handles data just like vanilla react <form />. So the use of the required prop inside <TextArea> has a purpose. <Form.Field /> required prop is indeed decorational in the sense you described.

Collectives™ on Stack Overflow

Input validation - react form submitting without any values

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related