CODEWITHSUNDEEP
javascriptreactjssemantic-ui-react
DJ2
DJ2

Reputation: 1741

Input validation - react form submitting without any values

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.

Upvotes: 0

Views: 1261

Answers (2)

xadm
xadm

Reputation: 8418

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.

Upvotes: 1

Asaf Aviv
Asaf Aviv

Reputation: 11770

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} />

Upvotes: 1

Related Questions