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. The button is outside the form because, again I don't want it to work as a submit button
<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>
CodePudding user response：
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>CodePudding user response：
It sounds to me like you're trying to check that your form inputs are filled in/have a minimum length.
For what you have described, you might not need much JavaScript at all. HTML supports basic validation out-of-the-box. E.g.:
<input type="password" minlength="8" required>
When you try to submit the form and this input is left empty or has less than 8 characters, it will not be submitted. An error is also shown next to the input element indicating what went wrong.
The only thing you might need JavaScript for is checking whether your two password inputs match. You could try this:
<script>
function submitForm(e) {
const password = document.getElementById('password').value;
const confirmation = document.getElementById('passwordConfirmation').value;
if (password !== confirmation) return false;
}
</script>
<form onsubmit="return submitForm()">
<input type="password" id="password">
<input type="password" id="passwordConfirmation">
<input type="submit" value="Submit">
</form>
Do note that this validation is happening entirely client-side. You should still verify this input on the server-side.
CodePudding user response：
`
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