How to Style Required Message Inputs and Textarea

Question

I'm currently making a contact page for my website in Reactjs, but how would I go about styling the required message when I click Submit? I want the message to appear directly below the input or textarea, but how do I do that?

Relevent Code

<form className='contact-form' onSubmit={this.handleSubmit}>
    Fields marked with an <span className='red'>∗</span> are required.
    <div className='form-item'>
        <label htmlFor="name">Name <span className='red'>∗</span></label>
        <input className='name'
            type="text"
            name="name"
            value={this.state.name}
            onChange={this.handleChange}
            required />
    </div>
    <div className='form-item'>
        <label htmlFor="email">Email <span className='red'>∗</span></label>
        <input className='email'
            type="email"
            name="email"
            value={this.state.email}
            onChange={this.handleChange}
            required />
    </div>
    <div className='form-item'>
        <label htmlFor="subject">Subject <span className='red'>∗</span></label>
        <input className='subject'
            type="text"
            name="subject"
            value={this.state.subject}
            onChange={this.handleChange}
            required />
    </div>
    <div className='form-item'>
        <label htmlFor="message">Message <span className='red'>∗</span></label>
        <textarea name='message'
            rows='8'
            value={this.state.message}
            onChange={this.handleChange}
            required />
    </div>
    <button className='btn' type='submit' disabled={this.state.disabled}>Submit</button>
    <div className={this.state.isSent ? 'message-open':'message'}>Message has been sent.</div>
</form>

Answer 1

You can use constraint validation API. There is a pseudo class named invalid. You can put some text for this warning under each input element with an element you set to be visibility hidden in css. When they are invalid by your constraint, you can set them to be visible.

small {
  visibility: hidden;
}

small:invalid {
  visibility: visible;
}

This works for every constraint. If you want only required to behave like that you can select them accordingly.

input:required + small {
  visibility: hidden;
}

input:required + small:invalid {
  visibility: visible;
}