Question

I am creating a JQuery dialog where I have use data from a Model I want to validate, but the box is just closed, if I then click to open the dialog again I can see the red text indication errors, but it just closed.

function createEditorDialog() {
    $('#floatsam_editor').dialog({ bgiframe: true, autoOpen: false, modal: true, width: 512,
        buttons: {
            'Close': function () { $('#floatsam_editor').dialog('close'); },
            'Create': function () {
                $('#flotsam_form').submit();
                $('#floatsam_editor').dialog('close');
            }
        }
    });
};

So the red text comes at the submit, but is closed right after, even though the validation failed.

Here is part of the ajax beginform that is shown

<div id="floatsam_editor">
@using (Ajax.BeginForm("CreateFlotsam" , "Flotsam", new { }, new AjaxOptions { HttpMethod = "Post", OnSuccess = "systematic_flotsam.successRequest" }, new { Id = "flotsam_form" }))
{
    <div>
        <fieldset>
            <legend>Create Log Entries</legend>
            <div >
                <span class="editor-label">
                        @Html.LabelFor(m => m.Received.Date)
                    </span>
                    <span class="editor-field">
                        @Html.TextBoxFor(m => m.Received.Date, new { id = "flotsam_date", @class="datepicker", maxlength="10"})
                    </span>
                    <span class="editor-field">
                        @Html.TextBoxFor(m => m.Received.Hour, new { id = "flotsam_hours", maxlength="2" })
                    </span>:<span class="editor-field">
                        @Html.TextBoxFor(m => m.Received.Minute, new { id = "flotsam_minutes", maxlength="2"})
                    </span>
                    <span>
                        @Html.ValidationMessageFor(m => m.Received.Date)
                        @Html.ValidationMessageFor(m => m.Received.Hour)
                        @Html.ValidationMessageFor(m => m.Received.Minute)
                    </span>
                </div>

            <div>
                <div class="editor-label">
                    @Html.LabelFor(m =>m.Flotsam.Informant)
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(m => m.Flotsam.Informant, new { @class = "flotsam_dialog_editor_field" })
                    @Html.ValidationMessageFor(m =>m.Flotsam.Informant)
                </div>
            </div>

Part of my model is here

        [DisplayName("Informant:")]
    [Required]
    public object Informant { get; set; }

    [DisplayName("Flotsam Nature:")]
    [Required]
    public object FlotsamNature { get; set; }

    [DisplayName("Position of Loss:")]
    [Required]
    public object Position { get; set; }

And as seen it has 3 propertys which are required, but again it still closes if I dont enter anything in my ajax form

So how do I make the dialog box not close when model validation fails?

A very important note is that all this is done on one site and on client side, I do not want to reload the page.

Answer 1

Only close the dialog if the form is valid.

if($("#flotsam_form").valid())
{
   $('#flotsam_form').submit();
   $('#floatsam_editor').dialog('close');
}

This way it dialog will stay open and validation errors will appear