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

Question

Я изо всех сил пытаюсь выяснить, почему моя кнопка не отправляет мою форму.

Итак,

В моем индексе у меня есть эта кнопка для вызова "модального" создания нового пользователя

<div class="relative" style="float: right; padding-right: 10px;">
        <a href="#" data-open="user-new" class="fi-plus">Adicionar Utilizador</a>
    </div>

</div>

@if (Auth::user()->RoleId == 4)
<div id="user-new" title="Novo utilizador" class="small reveal"
    data-reveal style="width: 100%">
    <h4 style="margin-bottom: 0">Novo utilizador</h4>
    <hr />

    @include('admin/users/create')

    <button class="close-button" data-close aria-label="Close reveal"
        type="button">
        <span aria-hidden="false">&times;</span>
    </button>
</div>
@endif

В шаблоне создания (admin / users / create) у меня есть этот код

<form class="form-horizontal" role="form" method="POST"
    action="{{ url('admin/users/new') }}" id="create_user_form">
    {!! csrf_field() !!}

    <div class="row">

        <div class="columns small-12 medium-6 large-5">

            <div class="dashboard-title">Dados Pessoais</div>

            <div class="data-container">

                <div class="row collapse">
                    <div class="small-3 columns header">
                        <b>Nome:</b>
                    </div>
                    <div class="small-9 columns end">
                        <input type="text" name="name" class="required"
                            requiredMessage="O campo 'Nome' não está preenchido" />
                    </div>
                </div>

                <div class="row collapse">
                    <div class="small-3 columns header">
                        <b>Utilizador:</b>
                    </div>
                    <div class="small-9 columns end">
                        <input type="text" name="username" class="required"
                            requiredMessage="O campo 'Utilizador' não está preenchido" />
                    </div>
                </div>

                <div class="row collapse">
                    <div class="small-3 columns header">
                        <b>Password:</b>
                    </div>
                    <div class="small-9 columns end">
                        <input type="password" name="password" class="required"
                            requiredMessage="O campo 'Password' não está preenchido" />
                    </div>
                </div>

                <div class="row collapse">
                    <div class="small-3 medium-12 large-3 columns header">
                        <b>Email:</b>
                    </div>
                    <div class="small-9 medium-12 large-9 columns end">
                        <input type="email" name="email" class="required"
                            requiredMessage="O campo 'Email' não está preenchido" />
                    </div>
                </div>

                <div class="row collapse">
                    <div class="small-3 medium-12 large-3 columns header">
                        <b>Nº Contribuinte:</b>
                    </div>
                    <div class="small-9 medium-12 large-9 columns end">
                        <input type="text" name="vatRegisterNumber" class="required"
                            requiredMessage="O campo 'Contribuinte' não está preenchido" />
                    </div>
                </div>

                <div class="row collapse">
                    <div class="small-3 medium-12 large-3 columns header">
                        <b>Tipo de Acesso:</b>
                    </div>
                    <div class="small-9 medium-12 large-9 columns end">
                        <select id="perfil" name="perfil">
                            <option value="produtor">Produtor</option>
                            <option value="cooperativa">Cooperativa</option>
                            <option value="tecnico">Técnico</option>
                            <option value="lacticoop">Lacticoop</option>
                        </select>
                    </div>
                </div>


            </div>
        </div>

        <div class="columns small-12 medium-6 large-5">

            <div class="dashboard-title">Dados de Contacto</div>

            <form id="change_contact" class="data-container">
                {!! csrf_field() !!}
                <div class="row collapse">
                    <div class="small-3 medium-12 large-3 columns header">
                        <b>Nome pessoa contacto:</b>
                    </div>
                    <div class="small-9 medium-12 large-9 columns end">
                        <input id="contact-name" type="text" name="contact-name"
                            class="required"
                            requiredMessage="O campo 'Nome contacto' não está preenchido" />
                    </div>
                </div>
                <div class="row collapse">
                    <div class="small-3 medium-12 large-3 columns header">
                        <b>Email:</b>
                    </div>
                    <div class="small-9 medium-12 large-9 columns end">
                        <input id="contact-mail" type="email" name="contact-mail"
                            class="required"
                            requiredMessage="O campo 'Email' não está preenchido" />
                    </div>
                </div>

                <div class="row collapse">
                    <div class="small-3 medium-12 large-3 columns header">
                        <b>Telefone:</b>
                    </div>
                    <div class="small-9 medium-12 large-9 columns end">
                        <input id="contact-phone" type="text" name="contact-phone"
                            class="required"
                            requiredMessage="O campo 'Telefone' não está preenchido" />
                    </div>
                </div>

                <div class="row collapse">
                    <div id="dvMessage" class="alert-container" style="display: none;"></div>
                </div>

            </form>
        </div>




    </div>

    <button class="button small round success" type="submit"
        onclick="return Utils.Validator.CheckForm('#user-new')">
        <i class="fi-mail"></i>&nbsp;Criar Inquérito
    </button>
    </div>
</form> 

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

<button class="button small round success" type="submit"
        onclick="return Utils.Validator.CheckForm('#user-new')">
        <i class="fi-mail"></i>&nbsp;Criar Inquérito
    </button>

Answer 1

У вас есть дополнительный тег </form>, который закрывает форму перед тем, как вы перейдете к кнопке.

Изменить

           <div class="row collapse">
                <div id="dvMessage" class="alert-container" style="display: none;"></div>
            </div>

        </form>
    </div>

до

               <div class="row collapse">
                    <div id="dvMessage" class="alert-container" style="display: none;"></div>
                </div>

        </div>

Answer 2

Ваша кнопка должна быть внутри

<form>
<button class="button small round success" type="submit"
    onclick="return Utils.Validator.CheckForm('#user-new')">
    <i class="fi-mail"></i>&nbsp;Criar Inquérito
</button>
</form>

тег или вы можете указать форму следующим образом.

<button class="button small round success" type="submit" form="create_user_form"
    onclick="return Utils.Validator.CheckForm('#user-new')">
    <i class="fi-mail"></i>&nbsp;Criar Inquérito
</button>

Но лучше всего кодировать кнопку внутри тега формы.