I can not find my error [closed]

Question

I can not find my error [closed]

Navigation

#1 by (0 votes)

2

This code works at the top of my website (menu), and I'm trying to use it in the footer as well, since I have the registry tab both at the top and in the footer, but in the footer it does not work.

Can anyone help me find the error? or is it simply impossible to use the same code at the top and in the footer? Remember that I'm creating all the separate pages (footer is one page, menu is another, and joining them with php.) For this reason, I believe, that should not make a mistake, since, supposedly, they are not in direct contact with a page with the other.

Can anyone help me with what I should do to make it work on both pages? Do 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>

javascript

asked by anonymous 13.09.2017 / 16:58

1 answer

How does data encryption work in Firebase? What is the difference between "string" and "character" in Python?

score 0 · 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 footer) and validate only this (ignoring the other) is using the code below (requires jQuery ):

Set the <form> parameter to this to onsubmit to identify the form, as follows:

onSubmit="return valida_campos(this);"

The advantage of using this is that it will make your code much leaner and easy to work, as well as lower s of your page, improving performance.

Add the variable i to 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 form was used and "highlighting" the other, making it out of the scope of JavaScript.

Your complete code looks 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;
  }
}