Validating a .NET 2.0 form with JQuery Validate() issues

Question

I am trying to validate a form in .NET 2.0 using the JQuery Validate() plug-in and it’s not working. I know my Jquery code is working as I set up functions to clear the default text of a text field on focus() and that works as expected.

The form.validate() method never seems to get called as I have alert() calls in a custom validation method that work in a separate HTML test page but never fire when integrated into the .NET page.

Could this be because the whole page is treated like a form in .NET? If I want to override the default submit action and add some client side validation, how can I do this or can I only validate the form in the code behind? Thanks.

my script:

<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/additional-methods.js" type="text/javascript"></script>
<script src="js/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {

        jQuery.validator.addMethod("checkfields", function(value, element) {

            if ($("#from_date").val() == "" && $("#to_date").val() == "" && $("#last_name").val() == "") {
                return false;
            }
        }, "Please enter either a last name, from date or to date.");

        $("input.from_date").mask("99/99/9999");
        $("input.to_date").mask("99/99/9999");

        $("#searchForm").validate({
            errorElement: "span",
            errorContainer: $("#error"),
            errorPlacement: function(error, element) {
                error.appendTo(document.getElementById("error"));
            },
            success: function(label) {
                $("#searchForm").submit();
            },
            rules: {
                last_name: "checkfields"
            }
        });
        $("#from_date").focus(function() {
            if ($("#from_date").val() == "mm/dd/yyyy") {
                $("#from_date").val("");
            }
        });
        $("#from_date").blur(function() {
            if ($("#from_date").val() == "") {
                $("#from_date").val("mm/dd/yyyy");
            }
        });
        $("#to_date").focus(function() {
            if ($("#to_date").val() == "mm/dd/yyyy") {
                $("#to_date").val("");
            }
        });
        $("#to_date").blur(function() {
            if ($("#to_date").val() == "") {
                $("#to_date").val("mm/dd/yyyy");
            }
        });
    });
</script>

And the form:

<form action="search.spax" id="searchForm" name="searchForm" method="post">

  <div id="error" style="display:none;">
      <span></span>.<br clear="all"/>
    </div>
  <table width="520" border="0" cellspacing="0" cellpadding="0" class="obit_form">
     <tr align="left">
      <th><label for="last_name">Last Name</label></th>
      <th></th>
      <th><label for="from_date">From</label></th>
      <th><label for="to_date">To</label></th>
      <th></th>
     </tr>
     <tr align="left">

      <td><input type="text" id="last_name" class="required date" name="last_name" value="" style="width:135px;" /></td>
      <td>and/or</td>
      <td><input type="text" id="from_date" class="required date" name="from_date" value="mm/dd/yyyy" style="width:75px;" /></td>
      <td><input type="text" id="to_date" class="required date" name="to_date" value="mm/dd/yyyy" style="width:75px;" /></td>

      <td><input type="submit alt="Search" title="Search" value="Search" name="submitButton" id="Submit2" /></td>
     </tr>
   </table>       
</form>

Answer 1

You're doing something like this?

$(document).ready(function() {

 $('#aspnetForm').validate({
 rules: {
        ctl00$chMain$tbLoginEmail: {
            required: true,
            email: true
        },
...

I know hard-coding the id isn't ideal, but you get the picture.