contact form validation Html/css/JS

Community feedback

• 

  Grego•1,430

  @Grego14

  Posted about 1 year ago

  👋 Hello! 🎉 Congratulations on completing the challenge! 🎉

  The preventDefault() method is used in a form when you don't want it to be sent, in this case you want it to be sent when everything is correct.

  To prevent the form from being submitted when there is an error, you can use the preventDefault() along with validations, something like this:

    nameValidate();
    lastNameValidate();
    emailValidate();
    radioValidate();
    checkBoxValidate();
  
  if (!(checkBox.checked === true) && 
  !(fields.value.length > 0) && 
  !(fields.value.length > 0) && 
  !(emailRegex.test(fields.value)) && 
  !(htmlRadio1.checked || cssRadio2.checked)) { 
    return e.preventDefault()
  }
  
    alert("Message Sent. Thanks for completing the form. We'll be in touch soon!");
  

  Here we would be using all the validation functions before verifying that the form is correct, since those functions remove and add the errors.

  And we use return e.preventDefault() in validating whether the inputs are invalid to prevent the alert from being sent.

  Using the tag br is considered a bad practice, as it should be used only when breaking the line is necessary, such as a poem of a few lines. It's best to use styles to achieve what you want.

  When using multiple inputs in a container, it's best to use the 👉 Fieldset tag instead of a div.

  You have duplicated ids in two input elements lname.

  No need to use the type attribute in the script tag

  I hope this helps! 😁

  00