Question

I am trying to click a save button and then call the validate function on my div section where all the fields that need validation have the required tag.

    <script type="text/javascript">
        $(document).ready(function () {
            $("#button").click(function() {
                $('#MyDIv').valid();
            });
        });

    </script>

<div id="MyDIv">
  <input type="text" class="required" id="id1" />
  <input type="text" id="id2" />
  <input type="button" id="button" />
</div>

With this code I am getting a validator is undefined error. I cannot use a form.

Answer 1

DEMO: http://jsfiddle.net/3BKcp/2/

Wrap a <form> tag around your form fields like so:

<div id="MyDIv">
     <form method="post" action="/next-page.html">
        <input type="text" class="required" name="id1" id="id1" />
        <input type="text" class="required" name="id2" id="id2" />
        <input type="button" id="button" />
     </form>
</div>

and change your JavaScript to the following:

<script>
$(document).ready(function(){
    $('#MyDIv form').validate();
    $("#button").click(function(){
        $(this).closest('form').submit();
    });
});
</script>