the form auto submit before i click submit

[zukhrofy]

hy iam sorry for my bad english, i create a project, in this project i create quiz form with react and react hook form
but the form always submitted after the error gone

// import third library
import * as yup from "yup";
import "../../utils/yupLocale";
import { useFieldArray, useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { useNavigate } from "react-router-dom";
import axios from "axios";
// use context hooks
import { useAuthContext } from "../../contexts/authContext";

// regular quiz validation schema
const regularQuizSchema = yup
.object({
namaQuiz: yup.string().required("nama kuis tidak boleh kosong"),
waktuPengerjaan: yup
.number()
.typeError("tidak boleh kosong")
.min(30, "minimal 30 menit")
.nullable(),
question: yup
.array(
yup.object({
questionId: yup.string(),
questionText: yup.string().required("pertanyaan tidak boleh kosong"),
answer: yup
.array()
.of(yup.string().required("option tidak boleh kosong"))
.required()
.min(2, "minimal dua option jawaban!"),
correctAnswer: yup
.string()
.required("pilih salah satu jawaban yang benar")
.nullable(),
})
)
.required()
.min(2, "minimal dua soal disediakan"),
})
.required();

const CreateRegularQuiz = () => {
// react hook form config
const {
register,
control,
handleSubmit,
formState: { errors },
reset,
} = useForm({
// reValidateMode: "onBlur",
resolver: yupResolver(regularQuizSchema),
defaultValues: {
namaQuiz: "",
tipeQuiz: "regular",
waktuPengerjaan: 0,
question: [
{
questionText: "",
answer: ["option 1", "option 2"],
},
],
},
});

// array of question config
const {
fields: questionFields,
append: appendQuestion,
remove: removeQuestion,
} = useFieldArray({
control,
name: "question",
});

const navigate = useNavigate();
const { user } = useAuthContext();

const onSubmit = async (data) => {
console.log("masuk sini ya bro");
console.log(data);

if (!user) {
  navigate("auth/login");
}

// const response = await axios.post("/quiz", data, {
//   headers: {
//     "Content-Type": "application/json",
//     Authorization: `Bearer ${user.token}`,
//   },
// });

const response2 = await fetch("/quiz", {
  method: "POST",
  body: JSON.stringify(data),
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${user.token}`,
  },
});

// const dataResponse = await response.data;

if (!response2.ok) {
  console.log("gagal post bro");
}

if (response2.ok) {
  console.log("new quiz added: ", data);
  reset(); // Reset the form after submission
  navigate("/dashboard/library");
}
// if (!response.statusText === "OK") {
//   console.log("gagal post bro");
// }

// if (response.statusText === "OK") {
//   console.log("new quiz added: ", data);
//   reset(); // Reset the form after submission
//   navigate("/dashboard/library");
// }

};

const onError = (err) => console.log(err);

return (
// container

{/* navbar */}

{user && (

{user.email}

Logout

)}

  {/* regular quiz form */}
  <main className="p-6 border border-slate-600">
    <h1 className="mb-6 text-3xl text-black font-bold">
      Create Standard Time Quiz
    </h1>

    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="hidden" {...register(`tipeQuiz`)} />

      <div className="flex justify-between">
        <div className="flex flex-col">
          <div>
            <label htmlFor="namaQuiz">Nama Kuis : </label>
            <input
              type="text"
              placeholder="nama kuis"
              {...register(`namaQuiz`)}
              className="border border-gray-400 px-4 py-2 rounded"
            />
          </div>
          <span className="text-sm text-red-400">
            {errors.namaQuiz?.message}
          </span>
        </div>

        <div className="flex flex-col">
          <div>
            <label htmlFor="waktuPengerjaan">Waktu Pengerjaan : </label>
            <input
              type="number"
              required
              placeholder="waktu pengerjaan"
              {...register(`waktuPengerjaan`)}
              className="border border-gray-400 px-4 py-2 rounded"
            />
          </div>
          <span className="text-sm text-red-400">
            {errors.waktuPengerjaan?.message}
          </span>
        </div>
      </div>

      {/* pertanyaan */}
      {questionFields.map((question, index) => (
        <div className="my-5 p-4 border border-slate-400" key={question.id}>
          <div className="flex gap-3">
            <div>No {index + 1}</div>
            <input
              type="hidden"
              value={index}
              {...register(`question.${index}.questionId`)}
            />
            {/* text pertanyaan */}
            <div className="flex flex-col gap-2">
              <input
                type="text"
                className="px-4 py-2 border border-gray-400 rounded"
                placeholder="pertanyaan"
                {...register(`question.${index}.questionText`)}
              />
              <span className="text-sm text-red-400">
                {errors.question?.[index]?.questionText?.message}
              </span>
            </div>
          </div>
          {/* jawaban */}
          <NestedArray
            questionIndex={index}
            {...{ control, register, errors }}
          />
          {/* tombol remove question jika ada lebih dari satu question */}
          {questionFields.length > 1 && (
            <button
              onClick={() => removeQuestion(index)}
              className="px-4 py-2 rounded border border-red-500 bg-red-500 text-white hover:bg-red-600">
              - Question
            </button>
          )}
        </div>
      ))}

      <div className="flex justify-between mb-2">
        {/* add question */}
        <button
          onClick={() =>
            appendQuestion({
              questionText: "",
              answer: ["option 1"],
              correctAnswer: "",
            })
          }
          className="px-4 py-2 rounded border border-indigo-600 bg-indigo-600 text-white hover:bg-transparent hover:text-indigo-600">
          + Question
        </button>
        {/* submit */}
        <button
          className="mt-5 px-4 py-2 rounded border border-emerald-500"
          type="submit">
          Submit
        </button>
      </div>
      <span className="text-sm text-red-400">
        {errors.question?.message}
      </span>
    </form>
  </main>
</div>

);
};

const NestedArray = ({ questionIndex, control, register, errors }) => {
const {
fields: answerField,
remove: RemoveAnswer,
append: appendAnswer,
} = useFieldArray({
control,
name: question.${questionIndex}.answer,
});

return (

{answerField.map((answer, answerIndex) => (
<>

{/* answer text /}
<input
type="text"
className="px-4 py-2 border border-gray-400 rounded"
placeholder={Option ${answerIndex + 1}}
{...register(question.${questionIndex}.answer.${answerIndex})}
/>
{/ input radio untuk correct answer /}
<input
type="radio"
value={answerIndex}
{...register(question.${questionIndex}.correctAnswer)}
/>
{/ button untuk mengurangi option /}
{answerField.length > 1 && (
<button
onClick={() => RemoveAnswer(answerIndex)}
className="px-4 py-2 rounded border border-red-500 bg-red-500 text-white hover:bg-red-600">
- option

)}
{/ error ketika salah tidak ada jawaban benar yang dipilih /}
{answerIndex === 0 && (

{errors.question?.[questionIndex]?.correctAnswer?.message}

)}

{/ error ketika input text answer kosong */}

{errors.question?.[questionIndex]?.answer?.[answerIndex]?.message}

      {/* error ketika pilihan option kurang dari 2 */}
      <div className="mb-3 text-sm text-red-400">
        {errors.question?.[questionIndex]?.answer?.message}
      </div>
    </>
  ))}

  {/* tombol untuk tambah answer */}
  <button
    onClick={() => appendAnswer(["option"])}
    className="px-4 py-2 rounded border border-indigo-600 bg-indigo-600 text-white hover:bg-transparent hover:text-indigo-600">
    + answer
  </button>
</div>

);
};

export default CreateRegularQuiz;

[Moshyfawn]

This is a lot of code without reproduction steps and a codesandbox 😔

One thing I can point you towards is check if it happens when you click any of the other non-submit buttons. HTML buttons behave as type="submit" buttons inside a form element by default.

[zukhrofy]

ok i will back with code sandbox

[zukhrofy]

https://codesandbox.io/s/boring-flower-i61rln?file=/src/App.js

that the code sandbox, try to click button +question and just clear the error, after the error gone, the handleSubmit is triggered.
i dont want it. i want the handle submit trigger just when i click submit

[Moshyfawn]

Yup, so, like I said, it's because the default HTML buttons type is submit inside form element , which triggers the form submission in your form.

Set non-submit buttons type="button" to fix it.

Here's a working example codesandbox.

[zukhrofy]

thank you so much man, you save my time, its my first time ask to programming community and i dont expect much but yeah thanks 👍

[Moshyfawn]

No worries!

[mrpitch]

@Moshyfawn thanks for the answer. I had a similar issue and was lost. Saved my day