Semantic Modal Form Button

Question

I am trying to create a form inside a modal. I have most of it working except for when I click my 'Submit' button it closes the modal even if there are required fields not filled in. Is their a way to keep the modal open?

ADD CODE:

Modal:

<div class="ui standard billboard modal" style="margin-top: -197.5px; display: block !important;">
    <div class="header">Add Billboard Slide</div>
        <div class="content">
            <div class="ui fluid form billboard">
                <div class="required field">
                    <label>Type</label>
                    <input placeholder="" type="text">
                </div>
                <div class="required field">
                    <label>Image</label>
                    <input name="image" placeholder="" type="text">
                </div>
                <div class="field">
                    <label>URL</label>
                    <input name="url" placeholder="URL" type="text">
                </div>
                <div class="required field">
                    <label>Enable/Disable</label>
                    <input placeholder="" type="text">
                </div>
                <div class="actions">
                    <div class="ui red deny clear button">
                        Cancel
                    </div>
                    <div class="ui positive submit button">
                        Add
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Modal Show:

$('.billboard.modal')
    .modal('attach events', '.billboard.button', 'show')
    .modal('setting', 'closable', false)
;

Answer 1

I answered this question a few days ago : https://stackoverflow.com/a/30895385/2053038

The basic idea is to return falseon your modal's onApprove method to prevent it from closing. You can then call the hide function when the form is ready.