Multi-step form using React.tsx (no validation)

Community feedback

• 

  Otutu qudus abolore•90

  @abolore1Posted over 1 year ago

  function validateComponent1() {

  if (!inputField[0].value) { inputField[0].style.border = "1px solid #e35252" errorMsg.style.display = "block"; } if (!inputField[1].value) { inputField[1].style.border = "1px solid #e35252" errorMsg.style.display = "block"; } if (!inputField[2].value) { inputField[2].style.border = "1px solid #e35252" errorMsg.style.display = "block";

  setTimeout(() => { inputField.forEach((field) => (field.style.border = "")); }, 3000);

  setTimeout(() => { errorMsg.style.display = "none"; }, 3000);

  } function validateEmail(email) { let re = /^(([^<>()[]\.,;:\s@"]+(.[^<>()[]\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/; return re.test(email); }

  if (inputField[0].value && inputField[1].value && inputField[2].value) { if(Number(inputField[0].value)){ // alert('Alphabet only') $('#wrong-format0').html('Alphabet only').css({'display':'block','color':'red'}).fadeOut(5000); inputField[0].value ='' return false

  } if(!validateEmail(inputField[1].value)){ $('#wrong-format').html('Wrong email format').css({'display':'block','color':'red'}).fadeOut(5000); inputField[1].value='' return false } if(isNaN(inputField[2].value)){ $('#wrong-format2').html('Wrong number format').css({'display':'block','color':'red'}).fadeOut(5000); inputField[2].value ='' return false

  } inputField[0].value = ""; inputField[1].value = ""; inputField[2].value = "";

  nextComponent(); // return true }

  setTimeout(() => { inputField[0].focus(); }, 3000) }

  Marked as helpful

  0