React bootstrap form example
React

React bootstrap form example

September 23, 2021

React bootstrap form example is react js tutorial which describes the react-bootstrap library for creating forms. This react js library helps you to create react components with Bootstrap styling without any effort. ( React bootstrap form example )

What are some of the benefits of using React? It lets you develop your web app faster because React is easier than other frameworks, it’s more cost effective, and there’s a wide variety of libraries that can be used to help extend its functionality.

Step 1 : Create Html File index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Mycodeshub - React JS and Bootstrap 4 Form with Validation</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div id="root"></div>
<!-- partial -->
 <script src='https://unpkg.com/react/umd/react.development.js'></script>
<script src='https://unpkg.com/react-dom/umd/react-dom.development.js'></script><script  src="./script.js"></script>

</body>
</html>

Step 2 : Create Script File script.js

class ContactForm extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      name: '',
      nameError: false,
      contact: '',
      email: '',
      emailError: false,
      emailError2: false,
      message: '',
      messageError: false,
      formValid: false };


    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
  }

  isValidEmail(email) {
    return /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/.test(email);
  }

  // isValidcontact(contactno) {
  //   return /^[6-9]\d{9}$/.test(contactno);
  // }  

  handleBlur(e) {

    const name = e.target.name;
    const value = e.target.value;

    this.setState({ [name]: value });

    if (value.length <= 0 && name == 'name') {
      this.setState({ nameError: true });
    } else {
      this.setState({ nameError: false });
    }

    if (value.length <= 0 && name == 'email') {
      this.setState({ emailError: true });
      this.setState({ emailError2: false });
    } else {
      this.setState({ emailError: false });
      if (this.isValidEmail(value)) {
        this.setState({ emailError2: false });
      } else {
        this.setState({ emailError2: true });
      }
    }

  }

  handleChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  handleSubmit(e) {
    const { name, email, message, nameError, emailError, emailError2, messageError } = this.state;

    this.setState({ nameError: name ? false : true });
    this.setState({ messageError: message ? false : true });
    this.setState({ emailError: email ? false : true });
    if (email && !emailError) {this.setState({ emailError2: this.isValidEmail(email) ? false : true });}


    if (name && email && message && !nameError && !emailError && !emailError2 && !messageError) {
      this.setState({ formValid: true });
    } else {
      this.setState({ formValid: false });
    }

    e.preventDefault();
  }

  render() {

    const { name, email, message, nameError, emailError, emailError2, messageError, formValid } = this.state;

    if (!formValid) {

      return /*#__PURE__*/(
        React.createElement(React.Fragment, null, /*#__PURE__*/
        React.createElement("div", { className: "card shadow-sm border-0 px-3 rounded-2 mb-3 py-4 mx-auto mt-5 bg-light" }, /*#__PURE__*/
        React.createElement("div", { className: "card-header bg-transparent border-0 text-center text-uppercase" }, /*#__PURE__*/React.createElement("h3", null, this.props.title)), /*#__PURE__*/
        React.createElement("div", { className: "card-body" }, /*#__PURE__*/
        React.createElement("form", { action: "/", onSubmit: e => this.handleSubmit(e), encType: "multipart/form-data", autoComplete: "off" }, /*#__PURE__*/
        React.createElement("div", { className: "form-group" }, /*#__PURE__*/
        React.createElement("label", { className: "mb-0" }, "Your name", /*#__PURE__*/React.createElement("span", { className: "text-danger" }, "*")), /*#__PURE__*/
        React.createElement("input", { name: "name", type: "text", className: "form-control", placeholder: "Name", value: this.state.name, onChange: this.handleChange, onBlur: this.handleBlur }),
        nameError ? /*#__PURE__*/
        React.createElement("div", { className: "alert alert-danger mt-2" }, "Name is a required field.") :
        ''), /*#__PURE__*/


        React.createElement("div", { className: "form-group" }, /*#__PURE__*/
        React.createElement("label", { className: "mb-0" }, "Your email", /*#__PURE__*/React.createElement("span", { className: "text-danger" }, "*")), /*#__PURE__*/
        React.createElement("input", { name: "email", type: "email", className: "form-control", placeholder: "Email", value: this.state.email, onChange: this.handleChange, onBlur: this.handleBlur }),
        emailError ? /*#__PURE__*/
        React.createElement("div", { className: "alert alert-danger mt-2" }, "Email is a required field.") :
        '',

        emailError2 ? /*#__PURE__*/
        React.createElement("div", { className: "alert alert-danger mt-2" }, "Email invalid.") :
        ''), /*#__PURE__*/


        React.createElement("div", { className: "form-group" }, /*#__PURE__*/
        React.createElement("label", { className: "mb-0" }, "Your contact number (Optional)"), /*#__PURE__*/
        React.createElement("input", { name: "contact", type: "text", className: "form-control", placeholder: "Contact", onChange: this.handleChange, value: this.state.contact })), /*#__PURE__*/

        React.createElement("div", { className: "form-group" }, /*#__PURE__*/
        React.createElement("label", { className: "mb-0" }, "Message", /*#__PURE__*/React.createElement("span", { className: "text-danger" }, "*")), /*#__PURE__*/
        React.createElement("textarea", { name: "message", type: "text", className: "form-control", placeholder: "Message", value: this.state.message, onChange: this.handleChange, onBlur: this.handleBlur }),
        messageError ? /*#__PURE__*/
        React.createElement("div", { className: "alert alert-danger mt-2" }, "Message is a required field.") :
        ''), /*#__PURE__*/


        React.createElement("p", { className: "text-center mb-0" }, /*#__PURE__*/React.createElement("input", { type: "submit", className: "btn btn-primary btn-lg w-100 text-uppercase", value: "Submit Now" }))))), /*#__PURE__*/




        React.createElement("hr", null), /*#__PURE__*/
        React.createElement("div", { className: "text-center" },
		/*#__PURE__*/React.createElement("a", { href: "", target: "_blank" }, "You can check login form here"))));


    } else {
      return /*#__PURE__*/(
        React.createElement("div", { className: "thankyou_details" }, /*#__PURE__*/
        React.createElement("div", { className: "alert alert-success mt-3" }, "Thank for your message. We will contact you soon."), /*#__PURE__*/
        React.createElement("ul", { className: "list-group" }, /*#__PURE__*/
        React.createElement("li", { className: "list-group-item" }, "Name: ", this.state.name), /*#__PURE__*/
        React.createElement("li", { className: "list-group-item" }, "Email: ", this.state.email), /*#__PURE__*/
        React.createElement("li", { className: "list-group-item" }, "contact: ", this.state.contact), /*#__PURE__*/
        React.createElement("li", { className: "list-group-item" }, "Message: ", this.state.message))));



    }
  }}


ReactDOM.render( /*#__PURE__*/
React.createElement(ContactForm, { title: "Mycodeshub.com - React JS and Bootstrap 4 Form with Validation" }),
document.getElementById('root'));


// export default ContactForm;

Step 3: Crate CSS file style.css

.card {
  width: 500px;
  max-width: 100%;
}

React bootstrap form example with validation

React-bootstrap-form-example-with-data-show
React-bootstrap-form-example-with-data-show

What types of different forms in react 

React is a JavaScript library developed by Facebook and Instagram to create user interfaces. React uses a virtual DOM that can render on the server, which means it’s great for SEO content. React also has JSX (JavaScript XML), which allows you to use HTML-like syntax right in your JavaScript code.

This makes it much easier for people who are not programmers but want to build their own sites or apps using React. You can learn more about how to use react at www.reactjsguidebook.com!

How to create a React form

React is a library for building user interfaces. It’s not the only option available, but it is one of the most popular and well-supported frameworks in use today. React can be used to create everything from single page apps to simple forms for your blog. In this post we’ll go over how you can add React form validation with little effort!
Read more: https://www.codementorx.com/blog/react-forms-validation#intro

FAQ

What is a React Bootstrap Form

In this blog post, we’ll be going over how to build a React form. We’ll start by creating a simple user input component and then create a more complicated one with validation that checks for empty fields. In the end, we will have created two forms that are fully functional and able to save data in an HTML file as well as json format! Let’s get started!

Leave a Reply

Your copyright text here !