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>
Use JQuery Validation plugin. It will be very useful and you can validate the form before submit and it is very easy to use.
Try this:
$('form').on('submit',function () {
var form = $(this);
var validate = true;
$.each(form.find('input:not([type="submit"])'), function (i, el) {
if($(el).val() == '') validate = false;
});
if (!validate) {
alert("Por favor, complete todos los espacios");
return false;
}
var password = form.find('input[name="password"]').val();
var password_conf = form.find('input[name="password_conf"]').val();
if (password.length < 8 ) {
alert("La contraseña debe ser mayor a 8");
return false;
}
if (password !== password_conf) {
alert("Las contraseñas deben ser iguales");
return false;
}
$("div.component1").hide();
$("div.component2").show();
return false;
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="component1">
<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 id='next-register'>
Siguiente
</button>
</form>
</div>
<div class="component2" style="display:none;">This is component 2</div>`
const form = $('#step-1');
$('#step-2').hide();
const validate = (values) => {
const errors = [];
// Add validations
if (!values[0].value) errors.push('Name is empty');
if (!values[1].value) errors.push('Email is empty');
return errors;
}
$('#step-1-next').on('click', function(e) {
const values = form.serializeArray();
const errors = validate(values);
if (!errors.length) {
// Show step 2
form.hide();
$('#step-2').show();
} else {
// Display errors
errors.forEach(err => {
console.log('error', err);
});
}
e.preventDefault();
})
$('#step-2-sutmit').on('click', function(e) {
const values = form.serializeArray();
console.log('values', values);
form.submit();
e.preventDefault();
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<form id="step-1" action='register.php' method='POST'>
<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 id="step-1-next" type="button">Next</button>
</form>
<div id="step-2">
<div>
Step 2
</div>
<button id="step-2-sutmit" type="button">Next</button>
</div>Check submit logic