Dialog form validation and submission

Basically, what I want to do is when a user clicks on a link,a popup dialog would show up asking for some user input and validate it and if the form is valid submit it to the controller to save the input to the database.

the saving works but when i started adding the validation the dialog would close and the input wont get saved to the database. Im new to jquery and I really need some help :(

here's my html code:

HTML Code:

---

<div id="pop-post-categories" class="jqmWindow hide">
            <p class="right"><a href="#" class="jqmClose"><strong>X</strong></a></p>
            <form id="categoryForm">
    <fieldset>
       
        <legend>Categories</legend>
       
              <div class="editor-label">
                <label for="txtAddNewCategory">Category Name</label>
              </div> <!--.editor-label//-->

              <div class="editor-field">
                <input type="text" name= "txtAddNewCategory" id="txtAddNewCategory" value="" />
              </div> <!--.editor-field//-->

              <div class="editor-label">
                <label for="txtSlug">Slug</label>
              </div> <!--.editor-label//-->

              <div class="editor-field">
                <input type="text" name= "txtSlug" id="txtSlug" value="" />
              </div> <!--.editor-field//-->

                <div class="editor-label">
                <label for="txtParent">Select Parent</label>
              </div> <!--.editor-label//-->

              <div class="editor-field">
                <input type="text" name= "txtParent" id="txtParent" value=""/>
              </div> <!--.editor-field//-->

              <p><input type="submit" id="Save" value="Save" )'" /></p>
              <input type="button" value="Cancel" onclick="location.href='@Url.Action("ViewCategories", "PostCategories")'" />
    </fieldset>
    <form>
</div>

---

and here's the one for the jquery:

Code:

---

<script type="text/javascript">

    $(function () {

        $('#categoryForm').validate({

            rules:
            {
                txtAddNewCategory: "required",
                txtSlug: "required",
                txtParent: "required"

            }

            $('#categoryForm').submit(function (e) {

              e.preventDefault();

                window.location.reload(true);

           
                var catName = $("#txtAddNewCategory").val();
                var catSlug = $("#txtSlug").val();
                var catParentID = $("#txtParent").val();

                var json = {
                    "Name": catName,
                    "Slug": catSlug,
                    "ParentID": catParentID
                };

                          if (json == null) {
                            alert("Form invalid!");
                            return;
                                }
 
            $.ajax({
                type: "POST",
                url: "@Url.Action("Save", "PostCategories")",
                dataType: "json",
                data: json,
                processData: true,
                success: function (data) {
                    $('#pop-post-categories').hide();
                    $('.jqmOverlay').hide();
                 
                                    }

            }); // end of ajax

            }); //end of Form.submit
        }); //end of validate



    });  //end of function
 
</script>

---

Moved to ASP.Net MVC Forum.

Gary

I'm assuming that you are happy with everything except when validation fails you dont want the popup to close.

First off are you validating server side? as it seems to me the problem lies with this bit of code:

Code:

---

success: function (data) {
                    $('#pop-post-categories').hide();
                    $('.jqmOverlay').hide();

---

Once a successful post by Ajax has been made, then unless the server crashes it will always return to the client via the success route. So both lines of code above will always cause the 'hide' to take place. What you really need to do is test the contents of data and only call these 2 methods when your happy that (data) hold the correct return value. It's also at this point that you might populate the validator etc.

Also as an aside move the :

Code:

---

e.preventDefault();

---

to the end of the function. This is one of the quirks of JQuery, it will work much better there.