Click here to Skip to main content
16,017,638 members
Home / Discussions / Web Development
   

Web Development

 
Question(min) / (max) Pin
Member 159961714-May-23 13:35
Member 159961714-May-23 13:35 
AnswerRe: (min) / (max) Pin
Richard MacCutchan4-May-23 22:02
mveRichard MacCutchan4-May-23 22:02 
GeneralRe: (min) / (max) Pin
Member 159961715-May-23 13:12
Member 159961715-May-23 13:12 
GeneralRe: (min) / (max) Pin
Richard MacCutchan5-May-23 22:00
mveRichard MacCutchan5-May-23 22:00 
AnswerRe: (min) / (max) Pin
Jeremy Falcon9-May-23 4:09
professionalJeremy Falcon9-May-23 4:09 
GeneralRe: (min) / (max) Pin
Richard MacCutchan9-May-23 4:53
mveRichard MacCutchan9-May-23 4:53 
GeneralRe: (min) / (max) Pin
Jeremy Falcon9-May-23 5:55
professionalJeremy Falcon9-May-23 5:55 
QuestionFacing issues while handling the submit button in a reactjs form Pin
Ankan Chanda 202326-Apr-23 22:23
Ankan Chanda 202326-Apr-23 22:23 
Hello,

I am creating a User registration form using React JS and as I have defined the fields and its validations along with the submit handler, it does not console log Hello World after pressing submit button. It doesn't seem to function at all. I am sharing my code below:

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import "./Userform.css";
import axios from "axios";

function Userform() {
  const schema = yup.object().shape({
    name: yup.string().required("Name is required"),
    dobOrAge: yup.string().required("Age is required"),
    sex: yup.string().required("Sex is required"),
    mobile: yup
      .string()
      .matches(
        /^[6-9]\d{9}$/,
        "Mobile number must be a valid Indian mobile number"
      )
      .nullable(),
    idType: yup.string().required("ID type is required"),
    id: yup.string().when("idType", {
      is: "Aadhar",
      then: yup
        .string()
        .matches(/^\d{12}$/, "Govt Id must be a valid 12-digit numeric string"),
      otherwise: yup
        .string()
        .matches(
          /^[A-Za-z]{5}\d{4}[A-Za-z]{1}$/,
          "Govt Id must be a valid 10-digit alpha-numeric string"
        ),
    }),
    email: yup.string("Email must be a valid email address").nullable(),
    emergencyContactNumber: yup
      .string()
      .matches(
        /^[6-9]\d{9}$/,
        "Emergency Contact Number must be a valid Indian mobile number"
      )
      .nullable(),
    guardianTitle: yup.string().nullable(),
    guardianName: yup.string().nullable(),
    address: yup.string().nullable(),
    country: yup.string().nullable(),
    state: yup.string().nullable(),
    pincode: yup.string().nullable(),
    city: yup.string().nullable(),
    occupation: yup.string().nullable(),
    nationality: yup.string().nullable(),
    religion: yup.string().nullable(),
    maritalStatus: yup.string().nullable(),
    bloodGroup: yup.string().nullable(),
  });

  const resolver = yupResolver(schema);

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    resolver,
  });

  const [message, setMessage] = useState(null);

  const onSubmithandler = (data) => {
    console.log(data);
  };

  return (
    <div className="form-container">
      <form onSubmit={handleSubmit(onSubmithandler)}>
        <div>
          <h2 className="form-heading">Personal Details</h2>
          <label className="form-label"> Name: </label>
          <input
            className="form-input"
            type="text"
            placeholder="Enter your full name"
            {...register("name", { required: true })}
          />
          {errors.name && <p className="form-error">{errors.name.message}</p>}
        </div>
         <div>
          <label className="form-label">Sex :</label>
          <input
            className="form-input"
            type="text"
            {...register("sex", { required: true })}
          />
          {errors.sex && <p className="form-error">{errors.sex.message}</p>}
        </div>
        <div>
          <label className="form-label">Mobile:</label>
          <input className="form-input" type="text" {...register("mobile")} />
          {errors.mobile && (
            <p className="form-error">{errors.mobile.message}</p>
          )}
        </div>
        <div>
          <label>
            ID Type:
            <select {...register("idType")}>
              <option value="">Select ID Type</option>
              <option value="Aadhar">Aadhar</option>
              <option value="PAN">PAN</option>
            </select>
            {errors.idType && <p>{errors.idType.message}</p>}
          </label>
          <label>
            Govt Issued ID:
            <input type="text" {...register("id")} />
            {errors.id && <p>{errors.id.message}</p>}
          </label>
        </div>
        <h2 className="form-heading">Contact Details</h2>
        <div>
          <label className="form-label">Email:</label>
          <input className="form-input" type="email" {...register("email")} />
          {errors.email && <p className="form-error">{errors.email.message}</p>}
          <label className="form-label">Emergency contact number:</label>
          <input
            className="form-input"
            type="text"
            {...register("emergencyContactNumber")}
          />
          {errors.emergencyContactNumber && (
            <p className="form-error">
              {errors.emergencyContactNumber.message}
            </p>
          )}
        </div>
        <div>
          <label className="form-label">Guardian Details:</label>
          <select className="form-select" {...register("guardianTitle")}>
            <option value="Mr.">Mr.</option>
            <option value="Mrs.">Mrs.</option>
          </select>
          <input
            className="form-input"
            type="text"
            {...register("guardianName")}
          />
          {errors.guardianName && (
            <p className="form-error">{errors.guardianName.message}</p>
          )}
        </div>

        <h2 className="form-heading">Address Details</h2>
        <div>
          <label className="form-label">Address:</label>
          <input className="form-input" type="text" {...register("address")} />
          {errors.address && (
            <p className="form-error">{errors.address.message}</p>
          )}

          <label className="form-label">Country:</label>
          <input className="form-input" type="text" {...register("country")} />
          {errors.country && (
            <p className="form-error">{errors.country.message}</p>
          )}
        </div>

        <div>
          <label className="form-label">State:</label>
          <input className="form-input" type="text" {...register("state")} />
          {errors.state && <p className="form-error">{errors.state.message}</p>}
        </div>
        <div>
          <label className="form-label">Pincode:</label>
          <input className="form-input" type="text" {...register("pincode")} />
          {errors.pincode && (
            <p className="form-error">{errors.pincode.message}</p>
          )}
        </div>
        <div>
          <label className="form-label">City:</label>
          <input className="form-input" type="text" {...register("city")} />
          {errors.city && <p className="form-error">{errors.city.message}</p>}
        </div>

        <h2 className="form-heading">Other Details</h2>
        <div>
          <label className="form-label">Occupation</label>
          <input
            className="form-input"
            type="text"
            {...register("occupation")}
          />
          {errors.occupation && (
            <p className="form-error">{errors.occupation.message}</p>
          )}
        </div>
        <div>
          <label className="form-label">Religion</label>
          <select className="form-select" {...register("religion")}>
            <option value="Hindu">Hindu</option>
            <option value="Muslim">Muslim</option>
            <option value="Christian">Christian</option>
            <option value="Sikh">Sikh</option>
            <option value="Jain">Jain</option>
            <option value="Buddhist">Buddhist</option>
          </select>
        </div>
        <div>
          <label className="form-label">Marital status</label>
          <select className="form-select" {...register("marital")}>
            <option value="Married">Married</option>
            <option value="Unmarried">Unmarried</option>
          </select>
        </div>
        <div>
          <label className="form-label">Blood Group</label>
          <select className="form-select" {...register("blood")}>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="AB">AB</option>
            <option value="O">O</option>
          </select>
        </div>
        <div>
          <label className="form-label">Nationality</label>
          <input
            className="form-input"
            type="text"
            {...register("nationality")}
          />
          {errors.nationality && (
            <p className="form-error">{errors.nationality.message}</p>
          )}
        </div>
        <button type="submit">Submit</button>
        {message && <p>{message}</p>}
      </form>
    </div>
  );
}

export default Userform;


I am filling in the form but as I submit it is not showing Hello World. Please help as to what should be done.
Questionhttps intranet with certificate signed by local CA Pin
Member 159703184-Apr-23 4:20
Member 159703184-Apr-23 4:20 
AnswerRe: https intranet with certificate signed by local CA Pin
Jeremy Falcon11-Apr-23 4:17
professionalJeremy Falcon11-Apr-23 4:17 
GeneralRe: https intranet with certificate signed by local CA Pin
Member 1597031813-Apr-23 0:39
Member 1597031813-Apr-23 0:39 
GeneralRe: https intranet with certificate signed by local CA Pin
Richard MacCutchan13-Apr-23 0:47
mveRichard MacCutchan13-Apr-23 0:47 
QuestionCenter text vertically with relative height Pin
_Flaviu2-Apr-23 21:34
_Flaviu2-Apr-23 21:34 
AnswerRe: Center text vertically with relative height Pin
Richard Deeming2-Apr-23 22:12
mveRichard Deeming2-Apr-23 22:12 
GeneralRe: Center text vertically with relative height Pin
_Flaviu2-Apr-23 22:59
_Flaviu2-Apr-23 22:59 
AnswerRe: Center text vertically with relative height Pin
Graeme_Grant2-Apr-23 22:36
mvaGraeme_Grant2-Apr-23 22:36 
GeneralRe: Center text vertically with relative height Pin
_Flaviu2-Apr-23 23:01
_Flaviu2-Apr-23 23:01 
QuestionFinal Project ideas that integrates ChatGpt Pin
Mohamad Shoumar29-Mar-23 5:16
Mohamad Shoumar29-Mar-23 5:16 
AnswerRe: Final Project ideas that integrates ChatGpt Pin
Gerry Schmitz29-Mar-23 5:50
mveGerry Schmitz29-Mar-23 5:50 
QuestionHow to add horizontal line under DIV Pin
wenwan131424-Mar-23 19:08
wenwan131424-Mar-23 19:08 
AnswerRe: How to add horizontal line under DIV Pin
Richard MacCutchan24-Mar-23 22:37
mveRichard MacCutchan24-Mar-23 22:37 
GeneralRe: How to add horizontal line under DIV Pin
Gerry Schmitz29-Mar-23 5:53
mveGerry Schmitz29-Mar-23 5:53 
AnswerRe: How to add horizontal line under DIV Pin
Jeremy Falcon27-Mar-23 4:46
professionalJeremy Falcon27-Mar-23 4:46 
GeneralRe: How to add horizontal line under DIV Pin
vefaakin6-Feb-24 22:27
vefaakin6-Feb-24 22:27 
GeneralRe: How to add horizontal line under DIV Pin
Richard Deeming6-Feb-24 22:40
mveRichard Deeming6-Feb-24 22:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.