CODEWITHSUNDEEP
javascriptreactjs
Sougata Mukherjee
Sougata Mukherjee

Reputation: 603

How to validate phone number in react that until user give valid phone number button should disabled

import React,{useState} from "react";
export default function Validate() {
  const [value, setValue] = useState("");
  const [disable, setDisable] = useState(false);
  function handleChange(e) {
    setValue(e.target.value);
    if (e.target.value.length <10)
     {
      setDisable(true);
    }
  }
  return (
    <>
      Phn:<input error={disable} type="number" value={value} onChange={handleChange}/>
      <button disabled={!disable}>click</button> 
    </>
  );
}

in this case initially button is disabled but when i type one number button is enabled but i need untill user give 10 digit phone number button is disabled

Upvotes: 0

Views: 612

Answers (2)

davood Sandoghsaz
davood Sandoghsaz

Reputation: 684

import React,{useEffect, useState} from "react";
export default function Validate() {
  const [value, setValue] = useState("");
  const [disable, setDisable] = useState(true);
  function handleChange(e) {
    setValue(e.target.value);
  }
  useEffect(() => {
    setDisable(value.length !== 10);
  }, [value])
  return (
    <>
    Phn:<input error={disable} type="number" value={value} onChange={handleChange}/>
    <button disabled={disable}>click</button> 
    </>
  );
}

Upvotes: 1

Himanshu Singh
Himanshu Singh

Reputation: 1953

You can try this:

I have added the link to the code https://codesandbox.io/s/happy-swartz-ikqdn?file=/src/input.js

Go to https://ikqdn.csb.app/input in codesandbox browser

What you are missing in the code is

function handleChange(e) {
    setValue(e.target.value);
    if (e.target.value.length <10) <-- not updating the disable if length = 10
     {
      setDisable(true); 
    }
  }

and in the input and button error and disable

Phn:<input error={disable} type="number" value={value} onChange={handleChange}/>
<button disabled={!disable}>click</button>

Both are in alternative state, i.e. if one becomes valid, then other becomes invalid.

Initially disabled must be true because input is empty and

I have taken initial value of input as null as an indicator of not clicked.

This is the condition of input error Input is clicked and the length != 10

value !== null && disable

Upvotes: 0

Related Questions