CODEWITHSUNDEEP
reactjsformsinput
Mamdlv
Mamdlv

Reputation: 540

Making inputs required in a React.js form

What is the best (and simplest) way to require inputs (name, email, content etc.) in React.js. I have searched for quite a while but there seems to be so many varying no-so-clear ways to do this. Ideally I want the inputs user_name, user_email and message to be require in order for the form to be sent successfully. Any help would be appreciated.

import React from 'react';
import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon } from 'mdbreact';
import NavBar from "./NavBar";
import Footer from "./Footer";
import emailjs from 'emailjs-com';
import{ init } from 'emailjs-com';




 function Contact() {
     

    
  function sendEmail(e) {
    e.preventDefault();

    emailjs.sendForm('hidden', 'hidden', e.target, 'hidden')
      .then((result) => {
        alert("Great, your request has been sent!"); 
        
      }, (error) => {
        alert("Oops, something went wrong. Please try again")
      });
      e.target.reset();
  }

  return (
     <div>
        <NavBar />
        <br />
        <br />
        <br />
        <br />
        <br />
        <MDBContainer>
          <MDBRow className = "formcontainer">
            <MDBCol md="6">
              <form onSubmit={sendEmail}>
                <p className="h4 text-center mb-4">Fill in the information below to contact me!</p>
                <br />
                <label htmlFor="defaultFormContactNameEx" className="grey-text" > Your name </label>
                <input type="text" id="defaultFormContactNameEx" className="form-control" name="user_name" />
                <br />


                <label htmlFor="defaultFormContactEmailEx" className="grey-text"> Your email </label>
                <input type="email" id="defaultFormContactEmailEx" className="form-control" name="user_email"/>
                <br />


                <label htmlFor="defaultFormContactSubjectEx" className="grey-text"> Subject</label>
                <input type="text" id="defaultFormContactSubjectEx" className="form-control" name="user_subject" />
                <br />


                <label htmlFor="defaultFormContactMessageEx" className="grey-text"> Your message </label>
                <textarea type="text" id="defaultFormContactMessageEx" className="form-control" rows="7" name="message"/>
                <div className="text-center mt-4">
                          <MDBBtn color="warning" outline type="submit">
                            Send
                            <MDBIcon far icon="paper-plane" className="ml-2" />
                          </MDBBtn>
                        </div>
                      </form>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
                <br />
                <br />
                <Footer />
                </div>
              );
            };



export default Contact;

Upvotes: 1

Views: 15845

Answers (1)

Agustin Moles
Agustin Moles

Reputation: 1534

The easier way to do that is using the required attribute in each of the form's elements.

i.e:

<input required type="email" id="defaultFormContactEmailEx" className="form-control" name="user_email"/>

You can absolutely check if all inputs are not empty when submiting the form too

More info about the required attribute here

Upvotes: 6

Related Questions