Home / Questions / 406302
Accepted
EMCode
Asked: 2021-11-13 14:07:40 +0800 CST 2021-11-13 14:07:40 +0800 CST

Form with multiple steps does not respect the required

  • 772

Following this tutorial , in which the same form is shown, but divided into three steps:

How do I get those requiredfrom the first step to respect each other?

That they are not clickable siguiente(to go to the 2nd step), but rather validate that they are empty.

Following a comment on the same post, it is recommended to make the following script:

 jQuery(".next").click(function() {
     current_step = jQuery(this).parent();
     var inputs = current_step.find("input")
     var countFails = 0;

     /**aqui busca si hay informacion el validationMesagge, el cual solo esta lleno cuando el campo esta mal diligenciado*/
     for (var i = 0; i < inputs.length; i++) {
       if (inputs[i].validationMessage != "Esperalee") {
         countFails++;
       }
     }
     /*solo vamos a pasar al siguiente cuando ningun input tenga error*/
     if (countFails == 0) {
       next_step = jQuery(this).parent().next();
       next_step.show();
       current_step.hide();
       setProgressBar(++current);
     }
   });

But it still ignores the require and only validates at the end when I submit.

I share the executable snippet below, thank you for your attention.

jQuery(".next").click(function() {
  current_step = jQuery(this).parent();
  var inputs = current_step.find("input")
  var countFails = 0;

  /**aqui busca si hay informacion el validationMesagge, el cual solo esta lleno cuando el campo esta mal diligenciado*/
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].validationMessage != "Esperalee") {
      countFails++;
    }
  }
  /*solo vamos a pasar al siguiente cuando ningun input tenga error*/
  if (countFails == 0) {
    next_step = jQuery(this).parent().next();
    next_step.show();
    current_step.hide();
    setProgressBar(++current);
  }
});



/* Script para mostrar u ocultar segun el paso a paso */

$(document).ready(function() {
  var current = 1,
    current_step, next_step, steps;
  steps = $("fieldset").length;
  $(".next").click(function() {
    current_step = $(this).parent();
    next_step = $(this).parent().next();
    next_step.show();
    current_step.hide();
    setProgressBar(++current);
  });
  $(".previous").click(function() {
    current_step = $(this).parent();
    next_step = $(this).parent().prev();
    next_step.show();
    current_step.hide();
    setProgressBar(--current);
  });
  setProgressBar(current);
  // Change progress bar action
  function setProgressBar(curStep) {
    var percent = parseFloat(100 / steps) * curStep;
    percent = percent.toFixed();
    $(".progress-bar")
      .css("width", percent + "%")
      .html(percent + "%");
  }
});
#regiration_form fieldset:not(:first-of-type) {
  display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="container">
  <h1>Registro de usuarios paso a paso</h1>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

  <form id="regiration_form" action="action.php" method="post">
    <fieldset>
      <h2>Paso 1: Crear su cuenta</h2>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" name="data[email]" placeholder="Email" required>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="password" placeholder="Password" required>
      </div>
      <input type="button" name="data[password]" class="next btn btn-info" value="Siguiente" />
    </fieldset>
    <fieldset>
      <h2> Paso 2: Agregar detalles personales</h2>
      <div class="form-group">
        <label for="fName">Nombres</label>
        <input type="text" class="form-control" name="data[fName]" id="fName" placeholder="Nombres" required>
      </div>
      <div class="form-group">
        <label for="lName">Apellidos</label>
        <input type="text" class="form-control" name="data[lName]" id="lName" placeholder="Apellidos" required>
      </div>
      <input type="button" name="previous" class="previous btn btn-default" value="Previo" />
      <input type="button" name="next" class="next btn btn-info" value="Siguiente" />
    </fieldset>
    <fieldset>
      <h2>Paso 3: Información de contacto</h2>
      <div class="form-group">
        <label for="mob">Numero Celular</label>
        <input type="text" class="form-control" id="mob" name="data[mob]" placeholder="Numero Celular" required>
      </div>
      <div class="form-group">
        <label for="address">Direccion</label>
        <textarea class="form-control" name="data[address]" placeholder="Direccion" required></textarea>
      </div>
      <input type="button" name="previous" class="previous btn btn-default" value="Previo" />
      <input type="submit" name="submit" class="submit btn btn-success" value="Enviar" id="submit_data" />
    </fieldset>
  </form>
</div>

javascript

1 Answers

  1. Best Answer

    One way you can accomplish what you're trying to do is by using the ValidityState interface to determine if the type element inputcontains the required data.

    For example, to determine if an element with a constraint requiredcomplies with it, you can check the status of the element valueMissing's object validity:

      document.getElementById('elemento').validity.valueMissing; // true o false

    which will return trueif the element contains any value, and falseotherwise.

    If we want to know if the element fulfills all the restrictions, we will use the property valid:

    document.getElementById('elemento').validity.valid; // true sólo si cumple todas las restricciones

    An example of using these properties in your code would be to apply it to the button's event handler next, and switch to the next view only if the inputcurrent view's type elements are valid:

    $(".next").click(function(e) {
  let first_input;
  let second_input;
  switch(current) {
    case 1: // primera vista
      first_input = document.getElementById('email');
      second_input = document.getElementById('password');
      break;
    case 2: // segunda vista
      first_input = document.getElementById('fName');
      second_input = document.getElementById('lName');
      break;
    case 3: // tercera vista
      first_input = document.getElementById('mob');
      second_input = document.getElementById('address');
    default:
      break;
  }
  // Ahora verificamos el estado de los 2 elementos de la vista y
  // pasamos a la siguiente sólo si ambos son válidos
  if(first_input.validity.valid && second_input.validity.valid) {
    current_step = $(this).parent();
    next_step = $(this).parent().next();
    next_step.show();
    current_step.hide();
    setProgressBar(++current);
  }
});

    This would be a way to prevent the next view from being displayed if the current one is invalid. It remains to decide if we show the right messages.

    You also need to verify the last view, since you don't have the button nextbut you have the button submitand apparently you don't perform the proper verification on it.

    reportValidity()For this you could use the element method form, adding an event handler to the button submit:

    // el evento
$('.submit').click(function(e) {
  e.preventDefault();
  // el formulario
  const formulario = document.querySelector('form');
  
  if(formulario.reportValidity()) {
    formulario.requestSubmit();
  }
});

    The complete code would look like this:

    /* Script para mostrar u ocultar segun el paso a paso */

$(document).ready(function() {
  var current = 1,
    current_step, next_step, steps;
  steps = $("fieldset").length;
  $(".next").click(function(e) {
    let first_input;
    let second_input;
    switch (current) {
      case 1:
        first_input = document.getElementById('email');
        second_input = document.getElementById('password');
        break;
      case 2:
        first_input = document.getElementById('fName');
        second_input = document.getElementById('lName');
        break;
      case 3:
        first_input = document.getElementById('mob');
        second_input = document.getElementById('address');
      default:
        break;
    }
    if(first_input.validity.valid && second_input.validity.valid) {
      current_step = $(this).parent();
      next_step = $(this).parent().next();
      next_step.show();
      current_step.hide();
      setProgressBar(++current);
    }
  });

  $(".previous").click(function() {
    current_step = $(this).parent();
    next_step = $(this).parent().prev();
    next_step.show();
    current_step.hide();
    setProgressBar(--current);
  });


  $('.submit').click(function(e) {
    const formulario = document.querySelector('form');
    e.preventDefault();
    if(formulario.reportValidity()) {
      formulario.requestSubmit();
    }
  });

  setProgressBar(current);
  // Change progress bar action
  function setProgressBar(curStep) {
    var percent = parseFloat(100 / steps) * curStep;
    percent = percent.toFixed();
    $(".progress-bar")
      .css("width", percent + "%")
      .html(percent + "%");
  }
});
    #regiration_form fieldset:not(:first-of-type) {
  display: none;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="container">
  <h1>Registro de usuarios paso a paso</h1>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

  <form id="regiration_form" action="action.php" method="post">
    <fieldset>
      <h2>Paso 1: Crear su cuenta</h2>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" name="data[email]" placeholder="Email" required>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="password" placeholder="Password" required>
      </div>
      <input type="button" name="data[password]" class="next btn btn-info" value="Siguiente" />
    </fieldset>
    <fieldset>
      <h2> Paso 2: Agregar detalles personales</h2>
      <div class="form-group">
        <label for="fName">Nombres</label>
        <input type="text" class="form-control" name="data[fName]" id="fName" placeholder="Nombres" required>
      </div>
      <div class="form-group">
        <label for="lName">Apellidos</label>
        <input type="text" class="form-control" name="data[lName]" id="lName" placeholder="Apellidos" required>
      </div>
      <input type="button" name="previous" class="previous btn btn-default" value="Previo" />
      <input type="button" name="next" class="next btn btn-info" value="Siguiente" />
    </fieldset>
    <fieldset>
      <h2>Paso 3: Información de contacto</h2>
      <div class="form-group">
        <label for="mob">Numero Celular</label>
        <input type="text" class="form-control" id="mob" name="data[mob]" placeholder="Numero Celular" required>
      </div>
      <div class="form-group">
        <label for="address">Direccion</label>
        <textarea class="form-control" name="data[address]" placeholder="Direccion" id="address" required></textarea>
      </div>
      <input type="button" name="previous" class="previous btn btn-default" value="Previo" />
      <input type="submit" name="submit" class="submit btn btn-success" value="Enviar" id="submit_data" />
    </fieldset>
  </form>
</div>

    I hope this helps you solve the problem.

    • 2