Question 70048 in Ajax Question posted in
You can find the official documentation here.

Check a form without submitting it? – Jquery ajax

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>
Tags:

4

Answers


  1. 0

    `

    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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

    Use JQuery Validation plugin. It will be very useful and you can validate the form before submit and it is very easy to use.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search