jQuery UI Using Submit button to force HTML form validation and premature closing of dialog

jQuery UI Using Submit button to force HTML form validation and premature closing of dialog

I have an interesting issue. I want to take advantage of HTML form validation and have been successful in doing so using the following code:

    $( "#form_0000" ).dialog({
        autoOpen: false,
        show: {
            effects: "fade",
            duration: 200
        },
        hide: {
            effects: "face",
            duration: 200
        },
        height: 300,
        width: 600,
        modal: true,
        buttons: {
            "Sign On": function() {
                console.log('#form_0000.dialog- Force click on hidden submit button.');
                $('#btnSignOn_0000').click();
            },
            "Forgot Password": function () {
                $('#formSignOn')[0].reset();
                UpdateError_0000(DefMsg_0000);
                $("#form_0000").dialog( "close" );
                $("#form_0001").dialog( "open" );
            },
            "Sign Up": function() {
                $('#formSignOn')[0].reset();
                UpdateError_0000(DefMsg_0000);
                $(this).dialog( "close" );
                $("#form_0002").dialog('option','title','Add Member to Delbert Hunter Arboretum');
                $("#form_0002").dialog( "open" );
            },
            Help: function() {
                $("#help_0000").dialog("open");
            },
            Cancel: function() {
                $('#formSignOn')[0].reset();
                UpdateError_0000(DefMsg_0000);
                $(this).dialog( "close" );
            }
        },
        close: function() {
            $('#formSignOn')[0].reset();
            UpdateError_0000(DefMsg_0000);
            $(this).dialog( "close" );
        }
    });













































The sign on button forces a click on a hidden form submit button and that causes the next event to occur:

    $('#formSignOn').submit(function(){
        var username = $("#EMAIL_0000").val(),
            password = $("#PASSWORD_0000").val(),
            $form = $(this),
            $inputs = $form.find("input, select, button, textarea");
        serializedData = 'func=logon&' + $form.serialize();
        console.log('#formsiginon.submit- serialized data: ' + serializedData);
        result = '';
        ajax_request = $.ajax({
            url: ajax_php,
            type: "post",
            data: serializedData
        });
        console.log('#formsignon.submit- return from $.ajax');
        $("#form_0000").dialog("refresh");













        ajax_request.success(function(data){
            console.log('#formsignon.submit- request.success data: ' + data);
            switch(data) {
                case "OK":
                    console.log('#formsignon.submit- Sign on successful.');
                    break;
                default:
                    UpdateError_0000(data);
                    console.error('#formsignon.submit- Sign on failed: ' + data);
            };
        });









//        ajax_request.done(function(response,textStatus,jqXHR){
//            console.log("Hooray, it worked!");
//            $("#form_0000").dialog("open");
//        });


        ajax_request.fail(function(jqXHR,textStatus,errorThrown){
            console.error(
                "The following error occurred: " +
                    textStatus, errorThrown
            );
        });




    })

The problem is when I've completed the formsignon submit function, the dialog closes. As you can see, after processing the ajax_request success function I try to re-open the dialog. I don't want the dialog to close since the user may not be valid and they should have the option to sign up or request to reset their password. How can I keep the dialog window open after processing the ajax function?

Here is the form:

<div id="form_0000" title="Sign On to Delbert Hunter Arboretum">
    <p id="error_0000" class="dha-form-text-error">All form fields are required.</p>
    <form id="formSignOn">
        <table>
            <tr>
                <td>Username: </td>
                <td>
                    <input
                        type="email"
                        name="EMAIL_0000"
                        id="EMAIL_0000"
                        tabindex="12"
                        size="40"
                        placeholder="Username"
                        value=""
                        required/>
                </td>
            </tr>
            <tr>
                <td>Password: </td>
                <td>
                    <input
                        type="password"
                        name="PASSWORD_0000"
                        id="PASSWORD_0000"
                        tabindex="13"
                        pattern="<?php echo $PasswordPattern; ?>"
                        value=""
                        placeholder="Password"
                        title="See help valid password."
                        required/>
                </td>
            </tr>
        </table>
<!--
        <br/><br/>
-->
        <button id="btnSignOn_0000" class="dha-form-button dha-form-button-submit" type="submit">Sign On</button>
    </form>
</div>







































Here is the console log:

#form_0000.dialog- Force click on hidden submit button.
#formsiginon.submit- serialized data: func=logon&EMAIL_0000=rich%40richware.net&PASSWORD_0000=S1xxxxxxx
#formsignon.submit- return from $.ajax


HTML1300: Navigation occurred.
File:
www.testsite.com
#formsignon.submit- request.success data: Username entered not a member
#formsignon.submit- Sign on failed: Username entered not a member


You can see this in action by going to http://www.delberthunterarboretum.org/TestSite/index.php.

Thanks in advance for taking time to look into this.

Regards,
Rich R