SO Dialog Validation issue

http://stackoverflow.com/questions/4035852/jquery-ui-dialog-on-jquery-validation-plugin-in-asp-net-can-this-work

by ryleyb

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/smoothness/jquery-ui.css">
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<div id="Dialog">
    <form name="myForm" id="aspnetForm">
        <input type="text" name="txtCodeName" id="txtCode"><br>
        <input type="text" name="txtDescName" id="txtDesc"><br>
        <input type="text" name="txtMallName" id="txtMall">
    </form>
</div>

<button class="Add">Click me</button>

JavaScript

$("#Dialog").dialog({
    bgiframe: true,
    autoOpen: false,
    height: 600,
    width: 590,
    modal: true,
    resizable: false,
    close: function() {}
});

$("#aspnetForm").validate({
    rules: {
        'txtCodeName': {
            required: true
        },
        'txtDescName': {
            required: true
        },
        'txtMallName': {
            required: true
        }
    },
    messages: {}
});

$(".Add").unbind();
$(".Add").click(function(e) {
    e.preventDefault();

    $("#Dialog").dialog('option', 'buttons', {
        'Add': function() {
            if ($("#aspnetForm").valid()) {
                console.log('valid data');
                $(this).dialog('close');
            } else {
                console.log('invalid data');
                return false;
            }

        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    });
    $("#Dialog").dialog('open');
});