HTML form in React with submission and validation outside of form

Question

I am trying to create an html form in react. This works, I can also submit it outside the form. By a button with input-type submit and the same id as the form. Only before the post action is executed I would check the form for completeness.

This is my current function that checks if the fields are filled in:

 checkLabels(){

    console.log('wordt gecheckt')
    
      if(this.state.name == ''){
          this.setState({
              errorMessage: 'Vul a.u.b. een naam in.'
          })
      }else if(this.state.email == ''){
        this.setState({
            errorMessage: 'Het e-mail adres is niet ingevult.'
        })
      }else if(this.state.postal == ''){
        this.setState({
            errorMessage: 'Er is geen postcode ingevult.'
        })
      }
      else if(this.state.number == ''){
        this.setState({
            errorMessage: 'Er is geen huisnummer ingevult.'
        })
      }else if(this.state.city == ''){
        this.setState({
            errorMessage: 'Er is geen woonplaats ingevult.'
        })
      }
  }

This is my form:

            <Col sm={4} className="h3-blue-left data-section">
                <h3>Gegevens en bezorgadres</h3>
                <form  method="post" action="http://127.0.0.1:3000/payment/" id="hook-form" onSubmit={this.checkLabels}>
                <input type="text" name="name" placeholder="Naam *" value={this.state.name} onChange={event => this.setState({ name: event.target.value, errorMessage:''})}/>
                <input type="text" name="email" placeholder="E-mail adres*" value={this.state.email} onChange={event => this.setState({ email: event.target.value, errorMessage:''})}/>
                <input type="text" name="postal_code" placeholder="Postcode *" value={this.state.postal} onChange={event => this.setState({ postal: event.target.value, errorMessage:''})}/>
                <input type="text" name="house_number" placeholder="Huisnummer *" value={this.state.number} onChange={event => this.setState({ number: event.target.value, errorMessage:''})}/>
                <input type="text" name="city" placeholder="Woonplaats *" value={this.state.city} onChange={event => this.setState({ city: event.target.value, errorMessage:''})}/>
                <input type="hidden" name="booklet" placeholder="boekjes" value={this.state.amountBooks} onChange={event => this.setState({ booklet: event.target.value, errorMessage:''})}/>
                <input type="hidden" name="voucher" placeholder="voucher" value={this.state.amountVouchers} onChange={event => this.setState({ voucher: event.target.value, errorMessage:''})}/>
                <label className="checkbox-picoo">Ja, schrijf mij ook in voor de nieuwsbrief <input type="checkbox"onChange={e => this.handleChange(e)} defaultChecked={this.state.checked}/></label>
                <span className="required-items">* De gegevens met een sterretje zijn verplicht.</span>
            
                </form>
            </Col>

And this is my button outside the form:

 <button type="submit" form="hook-form">Bevestig gegevens & betaal </button>

I'm in the process of learning React so that's why I'm asking this question.

Answer 1

Since you are already using state management, you can actually just remove the action from the form and just trigger the function on onSubmit you can then use fetch or axios to perform POST request:

(sample code)

<form  id="hook-form" onSubmit={this.onSubmit}>
    <input type="text" name="name" placeholder="Naam *" value={this.state.name} onChange={event => this.setState({ name: event.target.value, errorMessage:''})}/>
</form>

then on onSubmit (assuming that you are not using class):

const onSubmit = () => {
 if(this.state.name == ''){
     this.setState({
        errorMessage: 'Vul a.u.b. een naam in.'
     })
 }
 // other checking logic

 // perform POSt
  fetch.post("http://127.0.0.1:3000/payment/", {
     params: {
        name: this.state.name,
        // other fields
     }

  })
}