Semantic Modal UI Submit Window and Form Validation

Asked

Viewed 334 times

0

I have a modal window using the semantic UI framework, I can easily use Helper @Html.Beginform it validates 1 field, but not the others.

I need to do this validation via jquery when I do Submit looking at the framework I have the following form validation http://semantic-ui.com/behaviors/form.html I have the following link from Soen that explains a little, but I didn’t understand much https://stackoverflow.com/questions/30894806/how-to-stop-closing-modal-if-form-invalid/30895385#30895385 and follows my code:

Modal and Jquery from the Main Window

JS:

<script type="text/javascript">
    $(function () {
        $('.ui.small.modal.create').hide();
        $('#ADDTopico').click(function () {
            $('.ui.small.modal.create')
                .modal('show');
        });
    });
</script>

html:

<i class="close icon"></i>
<div class="header">
    Novo Tópico
</div>
<div class="content">
    @using (Html.BeginForm("ICreateTopicos", "IForum", FormMethod.Post, new { @class = "ui fluid form" }))
            {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="field">
            <div class="ui left icon input">
                @Html.TextAreaFor(model => model.ftpc_descricao, new { placeholder = "Descrição" })
                <div class="ui blue basic label">
                    @Html.ValidationMessageFor(model => model.ftpc_descricao)
                </div>
            </div>
        </div>
        <div class="field">
            <div class="ui left icon input">
                <div class="ui checkbox">
                    <input type="checkbox" name="ftpc_st_id" id="ftpc_st_id">
                    <label>Ativo?</label>
                </div>
            </div>
        </div>
        <div class="field">
            <div class="ui left icon input">
                @Html.Action("ITDisciplinas", "IForum")
                <div class="ui blue basic label">
                    @Html.ValidationMessageFor(model => model.ftpc_dp_id)
                </div>
            </div>
        </div>
        <div class="actions">
            <div class="ui black deny button">
                Cancelar
            </div>
            <button type="submit" id="btnSave" name="Command" class="ui positive right labeled icon button" value="Entrar">
                Entrar
                <i class="save icon"></i>
            </button>
        </div>
    }
</div>

Main Window

<div class="ui grid specialIDP">
    <div class="sixteen wide blue text column centered">
        <h1 class="">Tópicos | Forum</h1>
    </div>
</div>



<div class="ui grid centered">
    <div class="three wide column">
        <a class="ui labeled blue icon button" id="ADDTopico">
            <i class="add square icon"></i>
            Novo Tópico
        </a>
    </div>
    <div class="six wide column"></div>
    <div class="five wide column">
        <div class="ui grid">
            <div class="two wide text middle column">
                Filtro:
            </div>
            <div class="ten wide column">
                @Html.Action("ITDisciplinas", "IForum")
            </div>
            <div class="four wide column">
                <div class="ui checkbox">
                    <input type="checkbox" name="example">
                    <label>Desativado?</label>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="ui grid centered">
    <div class="fifteen wide column">
        @Html.Action("IGridForum")
    </div>
</div>

<div class="ui small modal create">
    @Html.Action("ICreateTopicos")
</div>
<div class="ui grid"></div>
  • Good night Deivid, do not use stacksnippets without need, they are not to format but to execute js+css+html codes that do something, if not to do anything use normal markup.

  • Thanks. I was pasting the code with Ctrl+H, but it wasn’t getting formatted.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.