Responsive Age Calculator with react, vite and tailwindcss

Community feedback

• 

  Saad Hisham•1,750

  @Saad-HishamPosted over 1 year ago

  Great job on completing the challenge! Your style and calculations are excellent. However, I noticed an issue with your validation.

  Here's an example of a validated form using React. You can customize it with your own code to create a robust validation system.

  import React, { useState } from 'react';
  
  function MyForm() {
  const [input1Value, setInput1Value] = useState('');
  const [input2Value, setInput2Value] = useState('');
  const [input3Value, setInput3Value] = useState('');
  
  function handleSubmit(event) {
  event.preventDefault();
  if (validateForm()) {
  // Submit the form or perform other actions
  } else {
  // Display an error message or prevent form submission
  }
  }
  
  function validateForm() {
  // Check if input values are empty
  if (input1Value.trim() === '' || input2Value.trim() === '' || input3Value.trim() === '') {
  return false;
  }
  
  // Check if input1Value is a number between 1 and 30
  const input1Int = parseInt(input1Value);
  if (isNaN(input1Int) || input1Int < 1 || input1Int > 30) {
  return false;
  }
  
  // Check if input2Value is a number between 1 and 12
  const input2Int = parseInt(input2Value);
  if (isNaN(input2Int) || input2Int < 1 || input2Int > 12) {
  return false;
  }
  
  // Check if input3Value is a number between 1 and 2022
  const input3Int = parseInt(input3Value);
  if (isNaN(input3Int) || input3Int < 1 || input3Int > 2022) {
  return false;
  }
  
  return true;
  }
  
  return (
  <form onSubmit={handleSubmit}>
  <input name="input1Field" type="text" value={input1Value} onChange={(event) => setInput1Value(event.target.value)} placeholder="Input 1 (1-30)" />
  <input name="input2Field" type="text" value={input2Value} onChange={(event) => setInput2Value(event.target.value)} placeholder="Input 2 (1-12)" />
  <input name="input3Field" type="text" value={input3Value} onChange={(event) => setInput3Value(event.target.value)} placeholder="Input 3 (1-2022)" />
  <button type="submit">Submit</button>
  </form>
  );
  }
  

  Keep up the good work! ✨

  0

  ---

  

  Nazmus Sakib•150

  @MNSM92Posted over 1 year ago

  @Saad-Hisham Thanks a lot for your help.

  0