HTML & Javascript - validation does not work

Question

I have the following HTML form:

  <form name ="form" class="signupform" action="signup.php" method="post" onsubmit="Valitedata()" enctype="multipart/form-data" autocomplete="off">
    <p><u>Create an account</u></p>
  <div class="form-container">
    <span class="input-label">Name:</span><input id="name" type="text" placeholder="Name" name="name"><br>
    <span class="input-label">Surname:</span><input id="surname" type="text" placeholder="surname" name="surname"><br>
    <span class="input-label">Email:</span><input id="email" type="email" placeholder="Email" name="email"><br>
    <span class="input-label">Door Number:</span><input id="doornumber" type="text" placeholder="Door number" name="doornumber"><br>
    <span class="input-label">Road:</span><input id="road" type="text" placeholder="road" name="road"><br>
    <span class="input-label">Post Code:</span><input id="postcode" type="text" placeholder="post code" name="postcode"><br>
    <span class="input-label">Password:</span><input id="password" type="password" placeholder="Password" name="password"> <br>
    <span class="input-label">Confirm Password:</span><input id="cpassword" type="password" placeholder="Confirm Password" name="confirmpassword" autocomplete="new-password"> <br>
      </div>

And I’m trying to do the validation in javascript:

function Validatedata()
{
    var name = document.Validatedata.name;
    var surname = document.Validatedata.surname;
    var email = document.Validatedata.email; 
    var doornumber = document.Validatedata.doornumber;
    var road= document.Validatedata.road;
    var postcode = document.Validatedata.postcode;
    var password = document.Validatedata.password;
    var confirmpassword= document.Validatedata.confirmpassword;
    var country = document.Validatedata.country;
    var Address = document.Validatedata.Address;
    var firstName = document.Validatedata.firstName;
    var lastName = document.Validatedata.lastName;
    var Email = document.Validatedata.Email;
    var MobilePhone = document.Validatedata.MobilePhone;

    if (name.value == "")
{
    window.alert("Please enter a name.");
    name.focus();
    return false;
}
   if (surname.value == "")
{
    window.alert("Please enter a surname.");
    surname.focus();
    return false;
}  
       if (doornumber.value == "")
{
    window.alert("Please enter door number.");
    doornumber.focus();
    return false;
} 
    if (road.value == "")
{
    window.alert("Please enter road.");
    road.focus();
    return false;
}  

   if (postcode.value == "")
{
    window.alert("Please enter postcode.");
   postcode.focus();
    return false;
}  
   if (country.value == "")
{
    window.alert("Please enter country.");
    country.focus();
    return false;
}  
   if (Address.value == "")
{
    window.alert("Please enter Address.");
    Address.focus();
    return false;
}  

   if (firstName.value == "")
{
    window.alert("Please enter firstName.");
    firstName.focus();
    return false;
} 
   if (lastName.value == "")
{
    window.alert("Please enter lastName.");
    lastName.focus();
    return false;
} 
    if (Email.value == "")
{
    window.alert("Please enter Email.");
    Email.focus();
    return false;
}    

   if (MobilePhone.value == "")
{
    window.alert("Please enter MobilePhone.");
    MobilePhone.focus();
    return false;
} 

}

But this validation I created is doing nothing. I would like to say that this validation has other "var" because I want to use the js file with other formats.

Any idea why it’s not working.

Answer 1

Your question lacks information so I analyzed your code.
But from the information I have, you can do it this way

function validateForm() {
    var name = document.forms["form"]["name"].value;
    var surname = document.forms["form"]["surname"].value;
    var email = document.forms["form"]["email"].value;
    var doornumber = document.forms["form"]["doornumber"].value;
    var road = document.forms["form"]["road"].value;
    var postcode = document.forms["form"]["postcode"].value;
    var password = document.forms["form"]["password"].value;
    var cpassword = document.forms["form"]["cpassword"].value;
    
    if (name == "") {
        alert("Please enter a name");
        return false;
    }
    
    if (surname == "") {
        alert("Please enter a surname");
        return false;
    }
    
    if (email == "") {
        alert("Please enter your email");
        return false;
    }
    
    if (doornumber == "") {
        alert("Please enter doornumber");
        return false;
    }
    
    if (road == "") {
        alert("Please enter road");
        return false;
    }
    
    if (postcode == "") {
        alert("Please enter postcode");
        return false;
    }
    
    if (password == "") {
        alert("Please enter a password");
        return false;
    }
    
    if (cpassword == "" || cpassword != password) {
        alert("The password does not match");
        return false;
    }
}

<form name ="form" class="signupform" action="signup.php" method="post" onsubmit="return validateForm()" enctype="multipart/form-data" autocomplete="off">
  <p><u>Create an account</u></p>
  <div class="form-container">
    <span class="input-label">Name:</span><input id="name" type="text" placeholder="Name" name="name"><br>
    <span class="input-label">Surname:</span><input id="surname" type="text" placeholder="surname" name="surname"><br>
    <span class="input-label">Email:</span><input id="email" type="email" placeholder="Email" name="email"><br>
    <span class="input-label">Door Number:</span><input id="doornumber" type="text" placeholder="Door number" name="doornumber"><br>
    <span class="input-label">Road:</span><input id="road" type="text" placeholder="road" name="road"><br>
    <span class="input-label">Post Code:</span><input id="postcode" type="text" placeholder="post code" name="postcode"><br>
    <span class="input-label">Password:</span><input id="password" type="password" placeholder="Password" name="password"> <br>
    <span class="input-label">Confirm Password:</span><input id="cpassword" type="password" placeholder="Confirm Password" name="confirmpassword" autocomplete="new-password"> <br>
    <button type="submit">Criar Conta</button>
  </div>
</form>