React : Display an error message when clicking on the "submit" button if the user enters t-CodePudding

I create a project in React. I would like that when the user clicks on the "submit" button it shows him an error message if in the input "FormDebut" he enters "text" type characters.

But I can't do this :'( , could you help me please? Thanks in advance !

FormulaireReservations.js :

export default function FormulaireReservation() {
 
  return (

    <div className="Formulaire">
      <Logo/>
     <h2><center>Formulaire de réservation</center></h2>
      <FormDebut/>

      <center><input type="submit" value="Submit" /></center>
    </div>
  );
}

Component FormDebut.js :

  
  const [value, setValue] = React.useState("");
  
  const onChange = (e) => {
    const formattedValue = formatInput(e.target.value);
    if (formattedValue.length < 6) {
      setValue(formattedValue);
    }
  }
  
  const formatInput = (input) => {
    if (input.length > 2 && input[2] !== ":") {
      return input.substring(0, 2)   ":"   input.slice(2);
    }
    return input;
  }
  
  return (
    <div className="Form">
      <div>Début : </div>
      <input placeholder="00:00" type="text" onChange={onChange} value={value}/>
    </div>
  )
}

export default FormDebut; ```

CodePudding user response：

Test this out in a new document, and then from there you can implement it into your work. You can have a parameter were user has to input a number between 1-10 if they do not then you can display an error message. If number is between 1-10 then you can redirect them. isNAN (is not a number) is a condition and is used for validating the input of the user. The function will check if the input is not a number, it will check if the input is less than 1 or more than 10, if all these conditions are true then it will display an error.

<p>Please input a number between 1 and 10:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
  // Get the value of the input field with id="numb"
  let x = document.getElementById("numb").value;
  // If x is Not a Number or less than one or greater than 10
  let text;
  if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
  } else {
    text = "Input OK";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

CodePudding user response：

I'm not sure if I understood your requirements, but seems that when you click submit button you want to check if the input is numeric value. If that's the case, this should work:

https://codesandbox.io/s/infallible-browser-74r5d7?file=/src/App.js

I moved the value state into the Form itself and passing it as a prop to its child. I also added a new state variable called error that is passed to the FormDebut. On click of the submit button, I strip the : from the value and check if I can parse it to a number. If not, I set the error, otherwise I clear out the error.

Hope that helps

CodePudding user response：

Here is something you can modify your components:

in your FormulaireReservations.js:

export default function FormulaireReservation() {

const [value, setValue] = React.useState("");
const [errorMsg, setErrorMsg] = React.useState("");

const handleSubmission = () => {
    if (isNaN(value)) {
        setErrorMsg('Input should not be a text')
    }
}

React.useEffect(() => {
    setErrorMsg('')
}, [value])

return (

    <div className="Formulaire">
        <Logo />
        <h2><center>Formulaire de réservation</center></h2>
        <FormDebut value={value} setValue={setValue} msg={errorMsg} />

        <center><input type="button" onClick={handleSubmission} value="Submit" /></center>
    </div>
);

}

and in your FormDebut.js :

function FormDebut({ value, setValue, msg }) {

const onChange = (e) => {
    const formattedValue = formatInput(e.target.value);
    if (formattedValue.length < 6) {
        setValue(formattedValue);
    }
}

const formatInput = (input) => {
    if (input.length > 2 && input[2] !== ":") {
        return input.substring(0, 2)   ":"   input.slice(2);
    }
    return input;
}

return (
    <div className="Form">
        <div>Début : </div>
        <input placeholder="00:00" type="text" onChange={onChange} value= {value} />
        { msg && <p>{msg}</p> }
    </div>
)}export default FormDebut;

So, basically, the value and errorMsg state is passed to another component that contains the input field. Each time changes on the input field will also update the state declared in the parent component. When a user clicks on submit button, it calls a function that is checking if the value is a number or not. Based on that the errorMsg state is updated. And in the FormDebut component, error msg will be shown just after the input field if any msg was set.