I can’t find my mistake

Question

This code works at the top of my site (menu), and I’m trying to use it also in the footer, since I have the registration tab both at the top and in the footer, but in the footer it doesn’t work.

Can anyone help me find the bug? or is it simply impossible to use the same code at the top and footer? Remembering that I am creating all pages separately (footer is a page, menu is another, and joining them with php. For this reason, I believe, that it should not give error, since, supposedly, are not in direct contact one page with the other.

Can anyone help me in what I should do to make it work on both pages? I have to change or add something?

function valida_campos() {
  if (document.getElementById('name').value == '') {
    alert('The field name is obrigatory.');
    document.getElementById('name').focus();
    return false;
  }
  if (document.getElementById('lastname').value == '') {
    alert('The field lastname is obrigatory.');
    document.getElementById('lastname').focus();
    return false;
  }
  if (document.getElementById('birthday').value == '') {
    alert('Field birthday is obrigatory.');
    document.getElementById('birthday').focus();
    return false;
  }
  if (document.getElementById('email').value == '') {
    alert('The field email obrigatory.');
    document.getElementById('email').focus();
    return false;
  }
  if (document.getElementById('password').value == '' || document.getElementById('password').value != document.getElementById('password2').value) {
    alert('Password didnt mach, please try again.');
    document.getElementById('password').focus();
    return false;
  }
}

<form class="default-form" action="cadastrar.php" method="post" onSubmit="return valida_campos();">


  <p class="form-row">
    <input name="name" id="name" type="text" placeholder="Name">
  </p>
  <p class="form-row">
    <input name="lastname" id="lastname" type="text" placeholder="Last Name">
  </p>
  <p class="form-row">
    <input name="birthday" id="birthday" type="text" placeholder="birthday d/m/y">
  </p>
  <p class="form-row">
    <input name="email" id="email" type="text" placeholder="Email">
  </p>
  <p class="form-row">
    <input name="password" id="password" type="password" placeholder="Password">
  </p>
  <p class="form-row">
    <input name="password2" id="password2" type="password" placeholder="Repeat Password">
  </p>

  <input type="submit" placeholder="cadastrar">

</form>

Answer 1

One way to leave the two forms repeated and the same Javascript that does the validation is to identify which form is being used (top or bottom) and validate only this one (ignoring the other) is using the code below (requires jQuery):

Put in the <form> the parameter this in the onsubmit that will serve to identify the form, this way:

onSubmit="return valida_campos(this);"

The advantage of using the this is that it will make your code much leaner and easy to work, and decrease the bytes of your page, improving performance.

Add the variable i in the function that will receive this parameter:

function valida_campos(i) {....

At the beginning of the function, add the code:

for(x=0;x<=$(".default-form").length;x++){
    if($(i).index() != x){
        formulario = $(".default-form:eq("+x+")").detach();
    }
}

This code will identify which of the two forms was used and "highlight" the other, making it outside the scope of Javascript.

Your complete code would look like this:

HTML

<form class="default-form" action="cadastrar.php" method="post" onSubmit="return valida_campos(this);">
  <p class="form-row">
    <input name="name" id="name" type="text" placeholder="Name">
  </p>
  <p class="form-row">
    <input name="lastname" id="lastname" type="text" placeholder="Last Name">
  </p>
  <p class="form-row">
    <input name="birthday" id="birthday" type="text" placeholder="birthday d/m/y">
  </p>
  <p class="form-row">
    <input name="email" id="email" type="text" placeholder="Email">
  </p>
  <p class="form-row">
    <input name="password" id="password" type="password" placeholder="Password">
  </p>
  <p class="form-row">
    <input name="password2" id="password2" type="password" placeholder="Repeat Password">
  </p>

  <input type="submit" placeholder="cadastrar" value="ok">
</form>

Javascript

function valida_campos(i) {

    for(x=0;x<=$(".default-form").length;x++){
        if($(i).index() != x){
            formulario = $(".default-form:eq("+x+")").detach();
        }
    }

  if (i.name.value == '') {
    alert('The field name is obrigatory.');
    i.name.focus();
    return false;
  }
  if (i.lastname.value == '') {
    alert('The field lastname is obrigatory.');
    i.lastname.focus();
    return false;
  }
  if (i.birthday.value == '') {
    alert('Field birthday is obrigatory.');
    i.birthday.focus();
    return false;
  }
  if (i.email.value == '') {
    alert('The field email obrigatory.');
    i.email.focus();
    return false;
  }
  if (i.password.value == '' || i.password.value != i.password2.value) {
    alert('Password didnt mach, please try again.');
    i.password.focus();
    return false;
  }
}