Input validation with formsy-semantic-ui-react not working properly

Question

I am using formsy-semantic-ui-react npm package for input validations but it's not working properly, see that red alert error label that is not hiding even I have erased value.

                        <Form.Field required>
                        <Popup
                        trigger={<Label pointing='below'>  Name plate capacity [kWp]</Label>}
                        header='Name plate capacity'
                        content='The maximum DC power output for the selected region'
                        />
                        <Input required name="system_capacity" value={ params.system_capacity } onChange={ this.handleChange } className='abc'
            errorLabel={errorLabel}
            validations={{
                if(value.toString().match(/^(\d*\.)?\d+$/) !== null){
                  return true
                }else{
                  return false
                }
              }
            }}
            validationErrors={{
              customValidation: 'Name can only be numeric'
            }}
          />
                    </Form.Field>

Answer 1

You have invalid JS in your code, validation property should get a valid js object.

formsy-react has a list of built-in validations, one of them is matchRegexp.

<Form.Field required>
  <Popup
    trigger={<Label pointing="below"> Name plate capacity [kWp]</Label>}
    header="Name plate capacity"
    content="The maximum DC power output for the selected region"
  />
  <Input
    required
    name="system_capacity"
    value={params.system_capacity}
    onChange={this.handleChange}
    className="abc"
    errorLabel={errorLabel}
    validations={{
      matchRegexp: /^(\d*\.)?\d+$/,
    }}
    validationErrors={{
      matchRegexp: 'Name can only be numeric',
    }}
  />
</Form.Field>;