CODEWITHSUNDEEP
reactjsreact-hooksuse-form
casual Ray
casual Ray

Reputation: 11

Why is my error message not showing up when I click enter?

I'm trying to have an error message pop up if the user submits an email without inputting a recipient, however, nothing happens upon clicking enter. Is there something I'm missing? pls help

import React from "react";
import "./SendMail.css";
import CloseIcon from "@mui/icons-material/Close";
import { Button } from "@mui/material";
import { useForm } from "react-hook-form";

const SendMail = () => {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm();

  const onSubmit = (formData) => {
    console.log(formData);
  };

  return (
    <div className="sendmail">
      <div className="sendmail__header">
        <h3>New Message</h3>
        <CloseIcon className="sendmail__close" />
      </div>

      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          name="to"
          type="text"
          placeholder="To"
          {...register("to", { required: true })}
        />
        {errors.to && <p className="sendMail__error">To is Required</p>}

    
        <div className="sendmail__options">
          <Button>Send</Button>
        </div>
      </form>
    </div>
  );
};

export default SendMail;

Upvotes: 1

Views: 46

Answers (1)

Peniel Dialu
Peniel Dialu

Reputation: 56

Add the submit type in your button

 <div className="sendmail__options">
    <Button type="submit">Send</Button>
 </div>

Upvotes: 1

Related Questions