display warning message after verifying condition

Question

I want to display a warning message on the right of the input text after verifiying the regex condition and the maximum length condition.

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.

Here my codesandbox link: https://codesandbox.io/s/l4j34xm3w9

Here my React JS 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 > 20) {
      alert("Max length 20");
    } else {
      this.setState({ userName: event.target.value });
    }
  }

  render() {
    return (
      <div className="displayCard">
        <div className="bgCreditCard">
          <div className="titleCard">
            <h1>Credit card</h1>
          </div>
          <div className="simCard">
            <img
              className="simCardImage"
              src="https://uploads.codesandbox.io/uploads/user/8f10ee4c-10fc-41b7-885a-4b795b293c1d/hh7c-chip.png"
              alt=""
            />
          </div>
          <div className="idCard">
            <h2 className="idCardNumber">7253 3266 5284 8621</h2>
          </div>
          <div className="userCard">
            <div className="userCardID">5422</div>
            <div className="userCardValidation">
              <div className="bloc1">
                Valid <br />
                thru
              </div>
              <div className="bloc2">
                month/year
                <br />
                <span>15/11</span>
              </div>
            </div>
          </div>
          <div className="userCardDescription">{this.state.userName}</div>
          <div className="cardType">
            <img
              className="simCardImage"
              src="https://uploads.codesandbox.io/uploads/user/8f10ee4c-10fc-41b7-885a-4b795b293c1d/aFYl-visa.jpg"
              alt=""
            />
          </div>
        </div>
        <div className="inputInterface">
          <input
            type="text"
            placeholder={this.state.displayMessage}
            onChange={this.handleChange}
          />
        </div>
      </div>
    );
  }
}

Answer 1

Using your code I've created a sandbox that put's the message below the input field, please check - https://codesandbox.io/s/4wy74rj4wx

I've added a new value object into your state with a message and a status. If the status is not ok then the message will appear in a span below the input field

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: "",
      valid: {
        status: true,
        message: ""
      }
    };

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

  handleChange(event) {
    var onlyTextRegex = /[^A-Za-z]/g;
    if (event.target.value.match(onlyTextRegex)) {
      this.setState({ valid: { status: false, message: "Tape only text" } });
    } else if (event.target.value.length > 20) {
      this.setState({ valid: { status: false, message: "Max length 20" } });
    } else {
      this.setState({
        userName: event.target.value,
        valid: { status: true, message: "" }
      });
    }
  }

  render() {
    const { valid } = this.state;
    return (
      <div className="displayCard">
        <div className="bgCreditCard">
          <div className="titleCard">
            <h1>Credit card</h1>
          </div>
          <div className="simCard">
            <img
              className="simCardImage"
              src="https://uploads.codesandbox.io/uploads/user/8f10ee4c-10fc-41b7-885a-4b795b293c1d/hh7c-chip.png"
              alt=""
            />
          </div>
          <div className="idCard">
            <h2 className="idCardNumber">7253 3266 5284 8621</h2>
          </div>
          <div className="userCard">
            <div className="userCardID">5422</div>
            <div className="userCardValidation">
              <div className="bloc1">
                Valid <br />
                thru
              </div>
              <div className="bloc2">
                month/year
                <br />
                <span>15/11</span>
              </div>
            </div>
          </div>
          <div className="userCardDescription">{this.state.userName}</div>
          <div className="cardType">
            <img
              className="simCardImage"
              src="https://uploads.codesandbox.io/uploads/user/8f10ee4c-10fc-41b7-885a-4b795b293c1d/aFYl-visa.jpg"
              alt=""
            />
          </div>
        </div>
        <div className="inputInterface">
          <input
            type="text"
            placeholder={this.state.displayMessage}
            onChange={this.handleChange}
          />
          {!valid.status ? (
            <span style={{ color: "#ff0000" }}>{valid.message}</span>
          ) : null}
          <input type="text" />
          <input type="text" />
        </div>
      </div>
    );
  }
}