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?

I have a debug point at $( "#serviceRtpLogMainForm" ).validate in firefox developer tools. It dosent even go there.. which confuses me a little more. — DJR
– DJR, Commented Dec 16, 2013 at 17:05

Subash Selvaraj · Accepted Answer · 2013-12-16 18:51:11Z

4

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

edited Dec 16, 2013 at 18:51

answered Dec 16, 2013 at 17:34

Subash Selvaraj

3,3871 gold badge16 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DJR Over a year ago

@Subhash the name attribute for my form field is already taken. Can i use styleId instead?

DJR Over a year ago

and im surprised as to why on clicking the submit button, the debug point is not reached in firefox developer tools

DJR Over a year ago

got it buddy.. i am able to validate the required fields. thanks

Collectives™ on Stack Overflow

Jquery form validation submit handler not working

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related