如何在提交时验证表单？

问题描述

我正在尝试在我的React Application中验证onSubmit表单。我想添加类似的功能，当条件之一返回false时，例如红色轮廓将添加到该输入中，并且在该输入中将包含带有错误的占位符。

这是在主文件中呈现的组件之一。通过单击“设置警报”按钮可以调用此组件。这不是那么重要，但是什么呢，我正在将getInfo（）函数从主要组件发送到该组件作为道具。验证返回true时，我需要调用此函数

表单由3个输入字段和一个按钮组成，但我不需要检查第一个。

由于我的应用程序是“闹钟”，当您单击“设置闹钟”按钮时会弹出此表格，因此我需要检查

第一个输入不为空，并且其值不超过24（在此输入中，您设置了警报时间） 第二个输入不为空，并且其值不超过60（在此输入中，您设置警报分钟） 我的想法是为这些值创建状态并创建应该更新状态的函数。函数称为onChange特定输入。

const [validate,setValidate] = useState({
    message:'',hours:'',minutes:''
}) 

function updateHours(e){
    let value = e.target.value
    setValidate(prevState => ({
        ...prevState,hours:value
    }))
}

function updateMinutes(e){
    let value = e.target.value;
    setValidate(prevState => ({
        ...prevState,minutes:value
    }))
}

到目前为止，一切正常。然后，我尝试创建新函数，该函数将验证这些值并应返回结果。该函数将称为onSubmit，如果返回true，则表示一切正常，将发送表单。

let getInfo = props.getInfo;

function validateForm(){
if(validate.hours > 24){
    alert('enter correct hours !')
    return false;
}

if(validate.minutes > 60){
    alert('enter correct minutes !')
    return false;
}

return getInfo;
}

我已经尝试过在onSubmit上执行此操作，而我只能找到这种方法，但这种方法不起作用。就像没有调用任何函数一样。

<form onSubmit="return validateForm">
 <FontAwesomeIcon 
    icon={faTimesCircle} 
    className="closeIcon"
    onClick={() => setAlarm(false)} />

 <h3>Please set your alarm</h3>

 <label htmlFor="text">Message</label>
 <input type="text" id="text" autoComplete="off" autoFocus="on" />

 <div className="flex">
   <div className="inputNumber">
      <label htmlFor="hours">Hour</label>
      <input type="number" id="hours" name="hours" onChange={updateHours} />
   </div>
                            
   <div className="inputNumber">
      <label htmlFor="minutes">Minute</label>
      <input type="number" id="minutes" name="minutes" onChange={updateMinutes} />
   </div>
</div>
<button onClick={()=>setAlarm(false)}>SET ALARM</button>

有没有人遇到过这种问题，或者您能给我建议如何处理？我对此也持开放态度。谢谢。

解决方法

我知道它看上去有点象，但是尝试过类似的东西吗？ 不用返回函数，只需调用它即可。

function validateForm(){
    if(validate.hours > 24 || validate.minutes > 60) {
        if(validate.hours > 24) alert('enter correct hours !')

        if(validate.minutes > 60) alert('enter correct minutes !')
    }
    else getInfo();
}

如果没有帮助，您能给我们提供一个reproducible example以便更好地了解的信息吗：）（您可以使用codesandbox.io）

,

我发现我几乎从不依赖默认表单提交进行响应，并且通常会调用一些API。我希望这是您要做的事情，因此，我将为此建议一个解决方案。

首先，验证功能。它应该阻止默认的表单提交，检查您的表单值并设置错误状态。如果一切正常，则应提交操作。

function validateForm(e) {
  e.preventDefault(); //stop the default browser behavior
  if(validate.hours > 24){
    alert('enter correct hours !')
    return;
  }

  if(validate.minutes > 60){
    alert('enter correct minutes !')
    return;
  }

  performMyApiCall();
}

第二，html。记住，onSubmit是React组件上的React属性。您需要为其提供功能。该函数将使用参数e，它是事件的详细信息。

<form onSubmit={validateForm}>
  //snip
</form>

这应该有助于您手动设置验证。就是说，除非我做一些不寻常的事情，否则我将使用现有的程序包进行表单验证。我将material-ui用作前端库，因此经常转到react-material-ui-form-validator。