So I have one page which is register.php. This page has 3 components of different information required to sign up a user. These components are hidden and shown using Jquery. Only the first component has the information needed to sign up BUT the signup/submit button is on the 3rd component.

What I want is to check the form on the first component so, in case its empty/not correct, not allow the user to move to the second component. How can I do this *without* submitting the form? I tried calling a function like the below but it doesn't work since it's not retrieving the information correctly.

```
function checkform(form){
    if(this.name.value == '' && this.email.value == '' && this.phone.value == '' && this.email.value == '' && this.password.value == '' && this.pasword_conf.value == ''){
        if (this.password.value == this.password_conf.value){
            if (this.password.value > 8){
                $("div.component1").hide();
                $("div.component2").show();
            }else{
                alert("La contraseña debe ser mayor a 8");
            }
        }else{  
            alert("Las contraseñas deben ser iguales");
        }
    }else{
        alert("Por favor, complete todos los espacios");
    }
}

```

I found some examples on internet using AJAX but most of them checked the form then automatically submit it which is not what I want.

Edit: This is the HTML.

```
  <form action='register.php' method='POST' id='user-information'>
    <input type='text' class='form-control' placeholder='Nombre' name='name' id='name'/>
    <input type='text' class='form-control' placeholder='Correo' name='email' id='email'/>
    <input type='text' class='form-control' placeholder='Teléfono' name='phone' id='phone'/>
    <input type='password' class='form-control' placeholder='Contraseña' name='password' id='password'/>
    <input type='password' class='form-control' placeholder='Confirma contraseña' name='password_conf' id='password_conf'/>

  <button type='button' id='next-register' onclick='checkform(this.form)'>
    Siguiente
  </button>

  </form>

```