jQuery: многоступенчатая / многоэтапная форма с проверкой

jQuery плагин многоступенчатой/многоэтапной формы с проверкой. В этом руководстве мы объясним вам, как использовать плагин мастера многошаговых форм с проверкой.

Это руководство также предоставляет вам живую демонстрацию плагина с полным исходным кодом и проверкой. И вы можете легко настроить этот мастер многошаговых форм jQuery для библиотеки jquery и css.

Многоступенчатая форма jQuery с проверкой

Просто выполните следующие шаги и создайте многоэтапную форму с проверкой, используя плагин jQuery multi step form wizard:

1. Подключаем многоэтапную форму jQuery (файл JS и CSS).

Вам нужно подключить последнюю версию jQuery и файлы плагина Multi Step Form в HTML-страницу. 

<script src="https://code.jquery.com/jquery-3.4.1.js"></script> 
<link rel="stylesheet" href="multi-form.css">
<script src="multi-form.js"></script>

2. Создаём пользовательские шаги для HTML-формы.

Вы можете создать собственную HTML-форму для многоступенчатой формы. 

<div class="tab">Name:
  <p><input placeholder="First name..." name="fname"></p>
  <p><input placeholder="Last name..." name="lname"></p>
</div>
<div class="tab">Contact Info:
  <p><input placeholder="E-mail..." name="email"></p>
  <p><input placeholder="Phone..." name="phone"></p>
</div>
<div class="tab">Birthday:
  <p><input placeholder="dd" name="dd"></p>
  <p><input placeholder="mm" name="nn"></p>
  <p><input placeholder="yyyy" name="yyyy"></p>
</div>
<div class="tab">Login Info:
  <p><input placeholder="Username..." name="uname"></p>
  <p><input placeholder="Password..." name="pword" type="password"></p>
</div>

3. Создаём настраиваемые кнопки навигации для мастера форм.

Вы можете создать настраиваемую кнопку навигации для мастера форм, как показано ниже: 

<div style="overflow:auto;">
  <div style="float:right; margin-top: 5px;">
    <button type="button" class="previous">Previous</button>
    <button type="button" class="next">Next</button>
  <button type="submit">Save</button>
  </div>
</div>

4. Настройте группу пагинации, обозначающих шаги мастера форм. 

Вы также можете настроить группу пагинации, которые обозначают шаги этапов заполнения форм, как показано ниже:

<div>
  <span class="step">1</span>
  <span class="step">2</span>
  <span class="step">3</span>
  <span class="step">4</span>
</div>

5. Включите мастер форм, вызвав функцию в элементе формы. 

//simple intialize
$("form").multiStepForm();
 
// with callback
$("form").multiStepForm({
   
  callback : function(){
    console.log("save");
  }
 
});

6. Используем проверку формы с настраиваемыми правилами.

Вы также можете создавать собственные правила проверки и сообщения для мастера многошаговых форм с помощью подключаемого модуля jQuery. 

var val = {
  // Specify validation rules
  rules: {
    fname: "required",
    email: {
          required: true,
          email: true
        },
  phone: {
    required:true,
    minlength:10,
    maxlength:10,
    digits:true
  },
  date:{
    date:true,
    required:true,
    minlength:2,
    maxlength:2,
    digits:true
  },
  month:{
    month:true,
    required:true,
    minlength:2,
    maxlength:2,
    digits:true
  },
  year:{
    year:true,
    required:true,
    minlength:4,
    maxlength:4,
    digits:true
  },
  username:{
    username:true,
    required:true,
    minlength:4,
    maxlength:16,
  },
  password:{
    required:true,
    minlength:8,
    maxlength:16,
  }
  },
  // Specify validation error messages
  messages: {
  fname:    "First name is required",
  email: {
    required:   "Email is required",
    email:    "Please enter a valid e-mail",
  },
  phone:{
    required:   "Phone number is requied",
    minlength:  "Please enter 10 digit mobile number",
    maxlength:  "Please enter 10 digit mobile number",
    digits:   "Only numbers are allowed in this field"
  },
  date:{
    required:   "Date is required",
    minlength:  "Date should be a 2 digit number, e.i., 01 or 20",
    maxlength:  "Date should be a 2 digit number, e.i., 01 or 20",
    digits:   "Date should be a number"
  },
  month:{
    required:   "Month is required",
    minlength:  "Month should be a 2 digit number, e.i., 01 or 12",
    maxlength:  "Month should be a 2 digit number, e.i., 01 or 12",
    digits:   "Only numbers are allowed in this field"
  },
  year:{
    required:   "Year is required",
    minlength:  "Year should be a 4 digit number, e.i., 2018 or 1990",
    maxlength:  "Year should be a 4 digit number, e.i., 2018 or 1990",
    digits:   "Only numbers are allowed in this field"
  },
  username:{
    required:   "Username is required",
    minlength:  "Username should be minimum 4 characters",
    maxlength:  "Username should be maximum 16 characters",
  },
  password:{
    required:   "Password is required",
    minlength:  "Password should be minimum 8 characters",
    maxlength:  "Password should be maximum 16 characters",
  }
  }
}
 
$("form").multiStepForm({
  validations:val
}

Вы можете скачать и увидеть демонстрацию этого плагина jquery для мастера многошаговых форм по ссылке, приведенной ниже: