Мастер начальной загрузки - проверка шагов формы - PullRequest
Новая
       14

Мастер начальной загрузки - проверка шагов формы

0 голосов
/ 28 мая 2018

Я использовал функцию поиска, но мне не удалось найти решение, соответствующее моим потребностям.У меня есть многошаговая форма, и я хотел бы проверить каждый шаг, поэтому, если обязательное поле пусто или не выбрано, мои пользователи не смогут перейти к следующему шагу.

Вот моя форма: 

<form method='post' action='index.php' id='signupForm' role='form' class='form-horizontal'>
    <div class='tab-pane' role='tabpanel' id='complete'>
        <div class='row margin-bottom-30'>
            <div class='col-sm-6'>
                <h3>Please select</h3><br />
                <label class='inputboxes'> Option 1  <span class='color-red'>*</span><br />
                    <input type='radio' id='boxes' name='payment_method' value='1' checked='checked' required><span class='checkmark'></span><br />
                </label>
            </div>

            <div class='col-sm-6'>
                <div class='row'>
                    <div class='col-sm-6'>
                        <label>Firstname <span class='color-red'>*</span></label>
                            <input type='text' name='firstname' class='form-control margin-bottom-20' required>
                    </div>
                    <div class='col-sm-6'>
                        <label>Lastname <span class='color-red'>*</span></label>
                            <input type='text' name='lastname' class='form-control margin-bottom-20' required>
                    </div>
                </div>
            </div>
        </div>

        <ul class='list-inline pull-right'>
            <li><button type='button' class='btn btn-default prev-step'>Zur&uuml;ck</button></li>
            <li><input type='submit' name='submit_data' class='btn btn-form btn-info-full' value='Registrierung abschlie&szlig;en'></li>
        </ul>
    </div>
</form>

А вот Javascript для мастера: 

<script type='text/javascript'>

    $(document).ready(function () {
        //Initialize tooltips
        $('.nav-tabs > li a[title]').tooltip();

        //Wizard
        $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

            var $target = $(e.target);

            if ($target.parent().hasClass('disabled')) {
                return false;
            }
        });

        $(".next-step").click(function (e) {

            var $active = $('.wizard .nav-tabs li.active');
            $active.next().removeClass('disabled');
            nextTab($active);

        });
        $(".prev-step").click(function (e) {

            var $active = $('.wizard .nav-tabs li.active');
            prevTab($active);

        });
    });

    function nextTab(elem) {
        $(elem).next().find('a[data-toggle="tab"]').click();
    }
    function prevTab(elem) {
        $(elem).prev().find('a[data-toggle="tab"]').click();
    }
</script>

До сих пор я пробовал: 

<script>
$(document).ready(function() {
    var $validator = $("#signupForm").validate({
      rules: {
        boxes: {
          required: true
        },
        firstname: {
          required: true,
          minlength: 3
        },
        lastname: {
          required: true,
          minlength: 3
        }
      }
    });
});
</script>

Как мне подключитьсямой $validator с помощью мастера начальной загрузки $(".next-step").click(function (e) {?

Буду признателен за любую помощь.

1 Ответ

0 голосов
/ 28 мая 2018

Один из вариантов - разделить ваши правила проверки для каждого шага и проверить их отдельно, например: 

 $(".next-step").click(function (e){
      var $validator = $("#signupForm").validate({
          rules: { boxes: {  required: true } } });

      if(!$validator) return;

      var $active = $('.wizard .nav-tabs li.active');
      $active.next().removeClass('disabled');
      nextTab($active);}
      );

Также вы можете использовать плагин jQuery validate() для динамического добавления / удаления ваших правил: 

$( "#signupForm" ).rules( "remove" ); // Removes all static rules from an element
$( "#signupForm" ).rules( "remove", "boxes" ); // Removes 'boxes' rule;
$( "#signupForm" ).rules( "add", "boxes");
...