Contact Form Using JS

Community feedback

• 

  Awais Ahmed•180

  @its-awais

  Posted 4 months ago

  look, don't need to define global variable, because you want to to check validation when you click the form, so use let variable in form validation, 2)look man you make your code more complicated, let me show you an easy way to do it."use strict";

  const firstName = document.querySelector("#fname");

  const lastName = document.querySelector("#lname");

  const email = document.querySelector("#email");

  const queries = document.querySelectorAll(".query-radio");

  const email_error = document.querySelector("#email-error");

  const error_query = document.querySelector("#dispQueryError");

  const error_term = document.querySelector("#dispTermError");

  const error_message = document.querySelectorAll(".error-msg");

  const formButton = document.querySelector(".btn");

  const firstNameChecking = () => { let firstNameValue = firstName.value.trim();

  let firstNameRegex = /^[a-zA-Z]{2,}$/;

  if (firstNameValue === "") { error_message[0].textContent = "first name is required"; } else if (!firstNameRegex.test(firstNameValue)) {

  error_message[0].textContent =
    "First name must contain only letter and be at least 2 character";
  

  } else {

  error_message[0].textContent = "";
  

  } };

  const emailChecking = () => {

  let emailAddress = email.value.trim();

  let emailRegex = /^[a-zA-Z-9._%+-]+@[a-zA-Z]{3,}$/;

  if (emailAddress === "") { error_message[2].textContent = "Please enter your email"; } else if (!emailRegex.test(emailAddress)) { error_message[2].textContent = "please enter a valid email address";

  } else { email_error[2].textContent = ""; } };

  const queriesChecking = () => { let isChecked = false; queries.forEach((query) => {

  if (query.checked) {
    isChecked = true;
  }
  

  });

  if (!isChecked) { error_query.textContent = "Please select a query type";

  } else { error_query.textContent = ""; } };

  const formValidation = (e) => { e.preventDefault(); firstNameChecking(); emailChecking(); queriesChecking(); };

  formButton.addEventListener("click", formValidation); this easy code, explaning
  1)when user click the button then i use formValidation look i did not use "prentisis()" because i don't want that it excute immediatly when script load i want that when button clicked 2)then it goes in formValidation and check when cliked now i use to call the function with prentisis because, i want that when script load then excute so, firstName() check the regex and match with input that user put if user put the value is empty he says please enter a value, "test" can give you two value true and false. 3) why i use error_message[2] because you use this error message everywhere in html so 0 index there is "firstName" first index there is "lastName" and then third index which is 2 its email. 4)checking queries so we need to check whethere user click the value or not, so first we isChecked = false; because when first time user came he don't now, so that's why we use false. And then we use forEach because there is two queries "genral" and second one is "support" so forEach and if(isChecked) if user click the query then make isCheked to true and if isChecked its mean if user does not click then do that.

  if you have any other question plz ask

  00