title: display warning message after verifying condition
body: <p>I want to display a warning message on the right of the input text after verifiying the regex condition and the maximum length condition.</p>
  
  <p>I already display an alert message after verifiying each condidtion and save and display the data.The alert message is very ugly and i want to display a warning message juste on the right of the input text.</p>
  
  <p>Here my codesandbox link:
  <a href="https://codesandbox.io/s/l4j34xm3w9" rel="nofollow noreferrer">https://codesandbox.io/s/l4j34xm3w9</a></p>
  
  <p>Here my React JS code:</p>
  
  <pre><code>import React from "react";
  
  import "./styles.css";
  
  export default class Card extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        displayMessage: "Enter the user name",
        userName: ""
      };
  
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange(event) {
      var onlyTextRegex = /[^A-Za-z]/g;
      if (event.target.value.match(onlyTextRegex)) {
        alert("Tape only text");
      } else if (event.target.value.length &gt; 20) {
        alert("Max length 20");
      } else {
        this.setState({ userName: event.target.value });
      }
    }
  
    render() {
      return (
        &lt;div className="displayCard"&gt;
          &lt;div className="bgCreditCard"&gt;
            &lt;div className="titleCard"&gt;
              &lt;h1&gt;Credit card&lt;/h1&gt;
            &lt;/div&gt;
            &lt;div className="simCard"&gt;
              &lt;img
                className="simCardImage"
                src="https://uploads.codesandbox.io/uploads/user/8f10ee4c-10fc-41b7-885a-4b795b293c1d/hh7c-chip.png"
                alt=""
              /&gt;
            &lt;/div&gt;
            &lt;div className="idCard"&gt;
              &lt;h2 className="idCardNumber"&gt;7253 3266 5284 8621&lt;/h2&gt;
            &lt;/div&gt;
            &lt;div className="userCard"&gt;
              &lt;div className="userCardID"&gt;5422&lt;/div&gt;
              &lt;div className="userCardValidation"&gt;
                &lt;div className="bloc1"&gt;
                  Valid &lt;br /&gt;
                  thru
                &lt;/div&gt;
                &lt;div className="bloc2"&gt;
                  month/year
                  &lt;br /&gt;
                  &lt;span&gt;15/11&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className="userCardDescription"&gt;{this.state.userName}&lt;/div&gt;
            &lt;div className="cardType"&gt;
              &lt;img
                className="simCardImage"
                src="https://uploads.codesandbox.io/uploads/user/8f10ee4c-10fc-41b7-885a-4b795b293c1d/aFYl-visa.jpg"
                alt=""
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="inputInterface"&gt;
            &lt;input
              type="text"
              placeholder={this.state.displayMessage}
              onChange={this.handleChange}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>