Jquery form validation submit handler not working

Question

I have an existing application which uses JavaScript to do form validation and im trying to replace it with jQuery. My form has up to 20 fields and i am trying to validate only one field for now.

This is the jQuery function i wrote to validate one field.

$(function() {

 //$(".submit").click(function(){
//   alert("jq");
     $( "#serviceRtpLogMainForm" ).validate({
         rules: {
             p_incdate_in: "required"
                },
         messages: {
             p_incdate_in: "Please enter the inception date."
                },
         submitHandler: function(form) {
                    // do other things for a valid form
                    form.submit();
                 }

 //});
});

And below is how the form, submit and the field in question is being validated.

<html:form action="/serviceRtpLogMain"  styleId="serviceRtpLogMainForm">

<html:text name = "serviceRptLog" property="p_incdate_in" styleId="incidDate" onfocus="cancelRequest1('DATE')" />
           <A href="javascript:cal4.popup();">

<td valign="middle" align="left" width="100%" colspan="4" height=38  class="td3" >
         <input type=submit value=Submit class="submit">
         <input type=reset value=Reset> 
     </td>

Not my aim is to just validate if the field has been filled and to submit the form only if the field has been filled in the right format.

What am i doing wrong here?

Solution

Make sure that your html will be like the below,

<form id="serviceRtpLogMainForm" action="/serviceRtpLogMain">
    <td valign="middle" align="left" width="100%" colspan="4" height="38"  class="td3" >
        <input type="text" name="p_incdate_in" class="p_incdate_in"/>
        <input type="submit" value="Submit" class="submit"/>
     </td>
</form>

and Script is

$(function() {        

    $( "#serviceRtpLogMainForm" ).validate({
        rules: {
                p_incdate_in: "required"
                },
        messages: {
                 p_incdate_in: "Please enter the inception date."
                 },
        submitHandler: function(form) {
                            // do other things for a valid form
                            form.submit();
                         }

        });

      });

Check the Fiddle

or If you dont want to use name attribute, add class attribute to your element and add rules like below,

       $( "#serviceRtpLogMainForm" ).validate({            
          submitHandler: function(form) {
                            // do other things for a valid form
                            form.submit();
                         }

        });
        $(".p_incdate_in").rules("add", { 
                    required:true,  
                    messages:"Please enter the inception date."
         });

Check Fiddle