Javascript, Web Page Not Calling Function

Question

I have a basic form, and I am trying to make some event listeners come up if you click away without answering, but my webpage is not seeming to call the function and I do not know why. As of right now it will just submit even if nothing is actually typed in. I have also tried to put the call for the script at the top of the HTML page with a "defer" and at the bottom but it still wont load

function resetProfile(e) {
  //document.forms[0].reset(); //no need to reset the form event by default clears input
  fNameError.innerHTML = '';
  lNameError.innerHTML = '';
  addressError.innerHTML = '';
  provinceError.innerHTML = '';
  countryError.innerHTML = '';
  emailError.innerHTML = '';
  phoneError.innerHTML = '';
  usernameError.innerHTML = '';
  passwordError.innerHTML = '';
}

function validateProfile(e) {

  var valid = true;

  //display warning if firstName is not entered
  if (profile.firstName.value === "") {
    fNameError.innerHTML = 'Please enter a First Name';
    valid = false;
  }

  //display warning if lastName is not entered
  if (profile.lastName.value === "") {
    lNameError.innerHTML = 'Please enter a Last Name';
    valid = false;
  }

  //display warning if address1 is not entered
  if (profile.address.value === "") {
    address1Error.innerHTML = 'Please enter address ';
    valid = false;
  }

  //display warning if city is not entered
  if (profile.province.value === "") {
    provinceError.innerHTML = 'Please enter a province';
    valid = false;
  }

  //display warning if province is not selected
  if (profile.country.value === "") {
    countryError.innerHTML = 'Please enter a Country';
    valid = false;
  }

  //display warning if country is not selected
  if (profile.email.value === "") {
    emailError.innerHTML = 'Please enter a valid email';
    valid = false;
  }

  if (profile.phone.value === "") {
    phoneError.innerHTML = 'Please enter a valid email';
    valid = false;
  }

  if (profile.username.value === "") {
    usernameError.innerHTML = 'Please enter a valid email';
    valid = false;
  }

  if (profile.password.value === "") {
    passwordError.innerHTML = 'Please enter a valid email';
    valid = false;
  }

  if (!valid) {
    // Then we prevent the form from being submitted/sent by canceling the event
    event.preventDefault();
  }
  //else alert("Thank you");
  return valid;

};



//form element events

//clear the warning message when the firstName is entered

document.querySelector('#fName').addEventListener("blur", function() {
  if (this.value !== "") {
    fNameError.innerHTML = "";
  }
});

//clear the warning message when the lastName is entered

document.querySelector('#lName').addEventListener("blur", function() {
  if (this.value !== "") {
    lNameError.innerHTML = "";
  }
});

//clear the warning message when the address1 is entered

document.querySelector('#address').addEventListener("blur", function() {
  if (this.value !== "") {
    addressError.innerHTML = "";
  }
});



document.querySelector('#province').addEventListener("blur", function() {
  if (this.value !== "") {
    provinceError.innerHTML = "";
  }
});


document.querySelector('#country').addEventListener("blur", function() {
  if (this.value !== "") {
    countryError.innerHTML = "";
  }

});

document.querySelector('#email').addEventListener("blur", function() {
  if (this.value !== "") {
    emailError.innerHTML = "";
  }

});

document.querySelector('#phone').addEventListener("blur", function() {
  if (this.value !== "") {
    phoneError.innerHTML = "";
  }

});

document.querySelector('#username').addEventListener("blur", function() {
  if (this.value !== "") {
    usernameError.innerHTML = "";
  }

});

document.querySelector('#password').addEventListener("blur", function() {
  if (this.value !== "") {
    passwordError.innerHTML = "";
  }

});



//Add a submit event listener to the form to invoke the validateProfile() method when the form submi           
document.profile.addEventListener("submit", validateProfile);

//Add a reser event listener to the form to invoke the resetProfile() method when the form is reset
document.profile.addEventListener("reset", resetProfile)

<form name="profile">
  <input type="text" id="fname" name="firstName" value="FirstName"><br><br>
  <span class="alert" id="fNameError"></span>

  <input type="text" id="lname" name="lastName" value="Last Name"><br><br>
  <span class="alert" id="lNameError"></span>

  <input type="text" id="address" name="address" value="Address"><br><br>
  <span class="alert" id="addressError"></span>

  <input type="text" id="Province" name="province" value="Province"><br><br>
  <span class="alert" id="provinceError"></span>

  <input type="text" id="country" name="country" value="Country"><br><br>
  <span class="alert" id="countryError"></span>

  <input type="email" id="email" name="email" value="Email"><br><br>
  <span class="alert" id="emailerror"></span>

  <input type="tel" id="phone" name="phone" value="Phone Number"><br><br>
  <span class="alert" id="phoneError"></span>

  <input type="text" id="username" name="username" value="Username"><br><br>
  <span class="alert" id="usernameError"></span>

  <input type="password" id="pwd" name="password" value="Password"><br><br>
  <span class="alert" id="passwordError"></span>

  <input type="submit" value="Submit"><input type="reset" value="Reset">


</form>

Why don't you simply use the required attribute if only checking for empty input? — SuperDJ
– SuperDJ, Commented Mar 23, 2021 at 18:13

mplungjan · Accepted Answer · 2021-03-23 18:44:49Z

Many issues

IDs not correct

values are not empty because you should have used placeholder etc

event.preventDefault vs e.preventDefault

DRY: Don't repeat yourself - we could shorten this even more with consistent fieldnames

This works. Adding required to the fields would have been simpler

const resetAlerts = () => {
  document.querySelectorAll(".alert").forEach(span => span.classList.add("hide"));
};

const validateProfile = (e) => {
  resetAlerts()
  let valid = true;
  
  //display warning if firstName is not entered
  if (document.getElementById('fname').value === "") {
    document.getElementById('fNameError').classList.remove("hide")
    valid = false;
  }

  //display warning if lastName is not entered
  if (document.getElementById('lname').value === "") {
    document.getElementById('lNameError').classList.remove("hide")
    valid = false;
  }

  //display warning if address1 is not entered
  if (document.getElementById('address').value === "") {
    document.getElementById('addressError').classList.remove("hide")
    valid = false;
  }

  //display warning if city is not entered
  if (document.getElementById('province').value === "") {
    document.getElementById('provinceError').classList.remove("hide")
    valid = false;
  }

  //display warning if province is not selected
  if (document.getElementById('country').value === "") {
    document.getElementById('countryError').classList.remove("hide")
    valid = false;
  }

  //display warning if country is not selected
  if (document.getElementById('email').value === "") {
    document.getElementById('emailError').classList.remove("hide")
    valid = false;
  }

  if (document.getElementById('phone').value === "") {
    document.getElementById('phoneError').classList.remove("hide")
    valid = false;
  }

  if (document.getElementById('username').value === "") {
    document.getElementById('usernameError').classList.remove("hide")
    valid = false;
  }

  if (document.getElementById('pwd').value === "") {
    document.getElementById('passwordError').classList.remove("hide")
    valid = false;
  }

  if (!valid) {
    // Then we prevent the form from being submitted/sent by canceling the event
    e.preventDefault();
  }

};




//Add a submit event listener to the form to invoke the validateProfile() method when the form submi           
document.getElementById("profile").addEventListener("submit", validateProfile);

//Add a reser event listener to the form to invoke the resetProfile() method when the form is reset
document.getElementById("profile").addEventListener("reset", resetAlerts);

span.alert.hide {
  display: none;
}

<form id="profile">
  <input type="text" id="fname" name="firstName" placeholder="FirstName">
  <span class="alert hide" id="fNameError">Please enter a First Name</span><br><br>

  <input type="text" id="lname" name="lastName" placeholder="Last Name">
  <span class="alert hide" id="lNameError">Please enter a Last Name</span><br><br>

  <input type="text" id="address" name="address" placeholder="Address">
  <span class="alert hide" id="addressError">Please enter address</span><br><br>

  <input type="text" id="province" name="province" placeholder="Province">
  <span class="alert hide" id="provinceError">Please enter a province</span><br><br>

  <input type="text" id="country" name="country" placeholder="Country">
  <span class="alert hide" id="countryError">Please enter a Country</span><br><br>

  <input type="email" id="email" name="email" placeholder="Email">
  <span class="alert hide" id="emailError">Please enter a valid email</span><br><br>

  <input type="tel" id="phone" name="phone" placeholder="Phone Number">
  <span class="alert hide" id="phoneError">Please enter a valid phone number</span><br><br>

  <input type="text" id="username" name="username" placeholder="Username">
  <span class="alert hide" id="usernameError">Please enter a valid username</span><br><br>

  <input type="password" id="pwd" name="password" placeholder="Password">
  <span class="alert hide" id="passwordError">Please enter a valid password</span><br><br>

  <input type="submit" placeholder="Submit"><input type="reset" placeholder="Reset" id="reset">


</form>

SuperDJ · Accepted Answer · 2021-03-23 18:23:18Z

You have multiple errors regarding naming of id. Like lName in JS but lname in HTML or pwd in JS and password in HTML. Also because you're only checking against empty fields you could use the required HTML attribute.

Also you should put the event.preventDefault(); at the start of the method. Just to be sure that your code is used. Oh and it is e.preventDefault() as e is the parameter name in function validateProfile(e).

function resetProfile(e) {
  //document.forms[0].reset(); //no need to reset the form event by default clears input
   fNameError.innerHTML = '';
   lNameError.innerHTML = '';
   addressError.innerHTML = '';
   provinceError.innerHTML = '';
   countryError.innerHTML = '';
   emailError.innerHTML = '';
   phoneError.innerHTML = '';
   usernameError.innerHTML = '';
   passwordError.innerHTML = '';
}

function validateProfile(e) {
// Then we prevent the form from being submitted/sent by canceling the event
    e.preventDefault(); // It is e not event. put it here to make sure your code is used
var valid = true;

//display warning if firstName is not entered
if (profile.firstName.value === "") {
    fNameError.innerHTML = 'Please enter a First Name';
    valid = false;
}

//display warning if lastName is not entered
if (profile.lastName.value === "") {
    lNameError.innerHTML = 'Please enter a Last Name';
    valid = false;
}

//display warning if address1 is not entered
if (profile.address.value === "") {
    address1Error.innerHTML = 'Please enter address ';
    valid = false;
}

//display warning if city is not entered
if (profile.province.value === "") {
    provinceError.innerHTML = 'Please enter a province';
    valid = false;
}

//display warning if province is not selected
if (profile.country.value === "") {
    countryError.innerHTML = 'Please enter a Country';
    valid = false;
}

     //display warning if country is not selected
if (profile.email.value === "") {
   emailError.innerHTML = 'Please enter a valid email';
    valid = false;
}

if (profile.phone.value === "") {
    phoneError.innerHTML = 'Please enter a valid email';
    valid = false;
}

if (profile.username.value === "") {
    usernameError.innerHTML = 'Please enter a valid email';
    valid = false;
}

if (profile.password.value === "") {
    passwordError.innerHTML = 'Please enter a valid email';
    valid = false;
}
};



//form element events

//clear the warning message when the firstName is entered

document.querySelector('#fname').addEventListener("blur", function(){
  if (this.value !== ""){
    fNameError.innerHTML = "";
}
});

//clear the warning message when the lastName is entered

// It is lname not lName
document.querySelector('#lname').addEventListener("blur", function(){
if (this.value !== ""){
    lNameError.innerHTML = "";
}
});

//clear the warning message when the address1 is entered

document.querySelector('#address').addEventListener("blur", function(){
if (this.value !== ""){
    addressError.innerHTML = "";
}
});



document.querySelector('#province').addEventListener("blur", function(){
if (this.value !== ""){
    provinceError.innerHTML = "";
}
  });


document.querySelector('#country').addEventListener("blur", function(){
if (this.value !== ""){
    countryError.innerHTML = "";
}

});

document.querySelector('#email').addEventListener("blur", function(){
if (this.value !== ""){
    emailError.innerHTML = "";
}

   });

document.querySelector('#phone').addEventListener("blur", function(){
if (this.value !== ""){
    phoneError.innerHTML = "";
}

});

document.querySelector('#username').addEventListener("blur", function(){
if (this.value !== ""){
    usernameError.innerHTML = "";
}

});

// It is pwd in html and it should be here
document.querySelector('#pwd').addEventListener("blur", function(){
if (this.value !== ""){
    passwordError.innerHTML = "";
}

});



//Add a submit event listener to the form to invoke the validateProfile() method when the form submi           
document.profile.addEventListener("submit", validateProfile);

//Add a reser event listener to the form to invoke the resetProfile() method when the form is reset
document.profile.addEventListener("reset", resetProfile)

<form name = "profile">
      <input type="text" id="fname" name="firstName"  value = "FirstName" required><br><br>
      <span class="alert" id="fNameError"></span>
    
      <input type="text" id="lname" name="lastName" value = "Last Name" required><br><br>
      <span class="alert" id="lNameError"></span>

      <input type="text" id="address" name="address" value = "Address" required><br><br>
        <span class="alert" id="addressError"></span>

      <input type="text" id="province" name="province" value= "Province" required><br><br>
      <span class="alert" id="provinceError"></span>

      <input type="text" id="country" name="country" value = "Country" ><br><br>
      <span class="alert" id="countryError"></span>

      <input type="email" id="email" name="email" value = "Email"><br><br>
      <span class="alert" id="emailerror"></span>

      <input type="tel" id="phone" name="phone"  value = "Phone Number"><br><br>
      <span class="alert" id="phoneError"></span>

      <input type="text" id="username" name="username" value = "Username"><br><br>
      <span class="alert" id="usernameError"></span>
      
      <input type="password" id="pwd" name="password" value = "Password"><br><br> 
      <span class="alert" id="passwordError"></span>

      <input type="submit" value="Submit"><input type="reset" value="Reset">

     
    </form>

You missed a few :) Also value should be placeholder or all fields are filled - see my answer
@mplungjan didn't want to make it copy paste for the OP. I mean I think the OP would learn more from figuring it out on their own with the help of some suggestions of where to look

Collectives™ on Stack Overflow

Javascript, Web Page Not Calling Function

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related