Блог

Я хочу создать логику перед отправкой, в которой говорится, что входное значение не должно быть пустым значением и должно быть больше 0.

 lt;Form className = "workout-form"gt;  lt;div className ="form-row"gt;  lt;label className ="form__label" valuegt;Durationlt;/labelgt;  lt;input type = 'number' value = {duration} min = '0' onChange = {(e) =gt; setDuration(e.target.value)} class = 'duration' placeholder="min" required/gt;  lt;/divgt;  lt;button className ="form-btn" onClick = {submitWorkout}gt;Add Workoutlt;/buttongt; lt;/Formgt;  

Способ сделать это-создать функцию проверки формы, которая будет вызываться, когда мы захотим отправить форму, и когда форма будет правильно заполнена, вы затем вызовете функцию для отправки сведений о форме. Пример функции управления формой

 function formValidation(){  duration = document.getElementById('durationField').value;    if(duration gt; 0 amp;amp; duration != ""){  //call the submit function  //submitWorkout()  }  }  //function to submit the form function submitWorkout(){  //content of the function }  

Чтобы это сработало, вам необходимо добавить свойство id в поле ввода и установить его в поле длительности следующим образом:

 lt;input type = 'number' id='durationField' value = {duration} min = '0' onChange = {(e) =gt; setDuration(e.target.value)} class = 'duration' placeholder="min" required/gt;