несколько форм в моде начальной загрузки - PullRequest
Новая
       36

несколько форм в моде начальной загрузки

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

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

В настоящий момент происходит сбой на стороне jQuery при попытке отправить форму MASTER:

Недопустимый элемент управления формы с именем = 'имя-подчиненной зоны' не может быть сфокусирован.
Anневерный элемент управления формы с именем = 'slave-zone-master' не может быть сфокусирован.

и не вызывает ошибок при попытке отправить форму SLAVE.

Я не являюсь обычным HTML / JS/ CSS, и хотя у меня есть опыт написания кода на других языках, я определенно упускаю некоторые понятия, поэтому любая помощь будет высоко оценена.Я предполагаю, что это как-то связано с отправкой ввода и тем, как они организованы в различных формах, а также с самим модалом.Идеи?

~ Cheers ~ 

<div class="panel-group" id="zone-selector">
    <button class="btn btn-lg btn-success" id="master-zone-btn" type="button" data-toggle="collapse" href="#add-master-zone" aria-controls="add-master-zone" data-parent="#zone-selector" aria-expanded="true">MASTER</button>
    <button class="btn btn-lg btn-secondary collapsed" id="slave-zone-btn" type="button" data-toggle="collapse" href="#add-slave-zone" aria-controls="add-slave-zone" data-parent="#zone-selector" aria-expanded="false">SLAVE</button>
    <br><br>
    <div class="panel panel-default" id="collapse-zone">
        <!-- master zone start -->
        <div class="panel-collapse collapse in" id="add-master-zone" aria-expanded="true" style="">
          <div class="card card-body">
            <form id="addzone-form" action="/some/url" method="post" class="form-horizontal" role="form">
            <br>
            <div class="form-group">
                <label class="col-xs-4 col-md-4 control-label" for="zone-name">Zone name</label>
                <div class="col-xs-8 col-md-8">
                <input type="text" name="zone-name" id="zone-name" class="form-control" placeholder="e.g. domain.tld or 12.34.56.in-addr.arpa" required="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-4 col-md-4 control-label" for="admin-email">Administator's email</label>
                <div class="col-xs-8 col-md-8">
                <input type="email" name="admin-email" id="admin-email" class="form-control" placeholder="Administator's email" required="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-4 col-md-4 control-label" for="soa-ttl">SOA record's TTL</label>
                <div class="col-xs-8 col-md-8">
                <input type="text" name="soa-ttl" id="soa-ttl" value="3600" class="form-control" placeholder="SOA record's TTL" required="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-4 col-md-4 control-label" for="soa-refresh">SOA refresh</label>
                <div class="col-xs-8 col-md-8">
                <input type="text" name="soa-refresh" id="soa-refresh" value="10800" class="form-control" placeholder="SOA refresh" required="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-4 col-md-4 control-label" for="soa-retry">SOA retry</label>
                <div class="col-xs-8 col-md-8">
                <input type="text" name="soa-retry" id="soa-retry" value="3600" class="form-control" placeholder="SOA retry" required="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-4 col-md-4 control-label" for="soa-expiry">SOA expiry</label>
                <div class="col-xs-8 col-md-8">
                <input type="text" name="soa-expiry" id="soa-expiry" value="604800" class="form-control" placeholder="SOA expiry" required="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-4 col-md-4 control-label" for="soa-nx">SOA NX</label>
                <div class="col-xs-8 col-md-8">
                <input type="text" name="soa-nx" id="soa-nx" value="3600" class="form-control" placeholder="SOA NX" required="">
                </div>
            </div>
            <div class="form-actions" style="position: absolute; left: -9999px; height: 1px;">
                <a href="javascript:void(0);" class="btn btn-default close-dialog">Cancel</a>
                <input type="hidden" name="token" value="">
                <input type="submit" name="addzone" class="btn btn-primary" value="Add">
            </div>
            </form>
          </div>
        </div>
        <!-- master zone end -->

        <!-- slave zone start -->
        <div class="panel-collapse collapse" id="add-slave-zone" aria-expanded="false" style="height: 0px;">
          <div class="card card-body">
            <form id="addzone-slave-form" action="/some/url" method="post" class="form-horizontal" role="form">
            <br>
            <div class="form-group">
                <label class="col-xs-4 col-md-4 control-label" for="slave-zone-name">Zone name</label>
                <div class="col-xs-8 col-md-8">
                <input type="text" name="slave-zone-name" id="slave-zone-name" class="form-control" placeholder="e.g. domain.tld or 12.34.56.in-addr.arpa" required="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-4 col-md-4 control-label" for="zone-master">Master server</label>
                <div class="col-xs-8 col-md-8">
                <input type="text" name="slave-zone-master" id="slave-zone-master" class="form-control" placeholder="IPv4 address of a Master DNS server" required="">
                </div>
            </div>
            <div class="form-actions" style="position: absolute; left: -9999px; height: 1px;">
                <a href="javascript:void(0);" class="btn btn-default close-dialog">Cancel</a>
                <input type="hidden" name="token" value="">
                <input type="submit" name="addzone-slave" class="btn btn-primary" value="Add">
            </div>
            </form>
          </div>
        </div>
        <!-- slave zone end -->
    </div>
</div>
<script>
$(document).ready(function() {
    $('#add-master-zone').on('show.bs.collapse', function() {
      $('#master-zone-btn').removeClass('btn-secondary');
      $('#master-zone-btn').addClass('btn-success');
    });
    $('#add-master-zone').on('hide.bs.collapse', function() {
      $('#master-zone-btn').removeClass('btn-success');
      $('#master-zone-btn').addClass('btn-secondary');
    });
    $('#add-slave-zone').on('show.bs.collapse', function() {
      $('#slave-zone-btn').removeClass('btn-secondary');
      $('#slave-zone-btn').addClass('btn-success');
    });
    $('#add-slave-zone').on('hide.bs.collapse', function() {
      $('#slave-zone-btn').removeClass('btn-success');
      $('#slave-zone-btn').addClass('btn-secondary');
    });

    if(('form#addzone-form').length){
        validateForm(
            "#addzone-form",
            "right", {
                "zone-name": {
                    "required": true
                },
                "admin-email": {
                    "required": true,
                    "email": true
                },
                "soa-ttl": {
                    "required": true
                },
                "soa-refresh": {
                    "required": true
                },
                "soa-retry": {
                    "required": true
                },
                "soa-expiry": {
                    "required": true
                },
                "soa-nx": {
                    "required": true
                }
            }
        );
    }
    if(('form#addzone-slave-form').length){
        validateForm(
            "#addzone-slave-form",
            "right", {
                "slave-zone-name": {
                    "required": true
                },
                "slave-zone-master": {
                    "required": true,
                    "email": true
                }
            }
        );
    }


});
</script>
...