Make a field or all fields required in React

Question

I have an input field like this:

<Form.Field
  name="contactName"
  className=""
  control={Input}
  label="Contact Name"
  placeholder="Contact Name"
  value={this.state.contactName || ''}
  onChange={this.onChange}
/>

and I want to make it required so for that it should be add required attribute and now looks like this:

<Form.Field
  name="contactName"
  className=""
  control={Input}
  label="Contact Name"
  placeholder="Contact Name"
  value={this.state.contactName || ''}
  onChange={this.onChange}
  required
/>

I noticed that it also adds a red asterisk near the input's title. The problem is that the user can still click the submit button and they will not know that the entry was not created (they don't check the network to see the call failed).

Is there a way to make it impossible to submit if the required data is not introduced? Also something like a popup/hover saying that it requires data?

Answer 1

Assuming you use Semantic UI to style your component, you can make use of error prop of your <Form.Field /> to raise an error if form is not valid.

To keep track of whether the form is valid, you may use your state. As an option you may set disabled property of Submit button equal to the state variable indicating whether the form is valid.

The very basic form validation (to match the pattern of one capital letter followed by lowercase letters) you may find in the following live-demo:

 const { Component } = React, { render } = ReactDOM, { Form, Input, Button } = semanticUIReact const rootNode = document.getElementById('root') class App extends Component { state = { submitAttempted: false, isValid: { contactName: false, contactPhone: false, contactMail: false } } validateInput = (name,value) => { switch(name){ case 'contactName': { if(/^[AZ][az]+$/.test(value)){ return true } else return false } case 'contactPhone': { if(/^\d+$/.test(value)){ return true } else return false } case 'contactMail': { if(/^\w+@\w+\.\w{1,4}$/i.test(value)){ return true } else return false } default: return false } } onChange = ({target:{name,value}}) => this.setState({ [name]: value, isValid: {...this.state.isValid, [name]: this.validateInput(name, value) } }) onSubmit = e => { e.preventDefault() this.setState({ submitAttempted: true }) Object.values(this.state.isValid).every(Boolean) && console.log(this.state.contactName, this.state.contactPhone, this.state.contactMail) } render(){ return ( <Form onSubmit={this.onSubmit} > <Form.Field name="contactName" className="" control={Input} label="Contact Name" placeholder="Contact Name" value={this.state.contactName || ''} onChange={this.onChange} required error={( (this.state.submitAttempted &&.this.state.isValid:contactName) && { content, 'Valid contact name should contain upper-case letters followed by lower-case letters': pointing. 'below' } )} /> <Form.Field name="contactPhone" className="" control={Input} label="Contact Phone" placeholder="Contact Phone" value={this.state.contactPhone || ''} onChange={this.onChange} required error={( (this.state.submitAttempted &&.this.state:isValid,contactPhone) && { content, 'Valid phone: should contain numbers only'. pointing. 'below' } )} /> <Form.Field name="contactMail" className="" control={Input} label="Contact Mail" placeholder="example@hello.com" value={this.state.contactMail || ''} onChange={this.onChange} required error={( (this.state.submitAttempted &&.this:state,isValid:contactMail) && { content. 'Valid e-mail format should be fulfilled'. pointing. 'below' } )} /> <Button type="submit" disabled={ this.state.submitAttempted &&.Object,values(this.state.isValid).every(Boolean) } > Submit </Button> </Form> ) } } render ( <App />, rootNode )

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-react/0.88.2/semantic-ui-react.min.js"></script><div id="root"></div>

Answer 2

You need to add your own validation to check if any of the inputs are empty or not when submit button is clicked if any input is empty show an alert.

This is not an inbuilt functionality you need to add the code for validation and alert yourself.