jQuery validator not working

Question

I have included jQuery validate for my site for uploading advertisement file.. I don\'t know why but this is not working.

HTML file is as following:

Answer 1

you should use onsubmit on form , to validate the data .you should also call e.preventDefault() which will prevent the form from firing more than once

DEMO : http://jsfiddle.net/m27Ljpb9/1/

<form  enctype="multipart/form-data" action="#"  id="formToPushAd" method="post" onsubmit="validateData(event)">
  <table>
    <tr>
        <td width="100px">Ad Image:</td>
        <td><input type="file" name="file"/></td>
   </tr>  
   <tr>
        <td width="100px">Ad URL:</td>
        <td><input type="text" name="adUrl"/></td>
   </tr>  
   <tr>
        <td>Starting Date:</td>
        <td><input type="text" id="datepicker1" name="datepicker1"/></td>
   </tr>       
   <tr>
        <td>Ending Date:</td>
        <td><input type="text" id="datepicker2" name="datepicker2" onchange="dateSelected()"/></td>
   </tr>
   <tr>
        <td><input type="submit"/></td>
   </tr>
</form>
<script>
function validateData(e){
     e.preventDefault();
     rules:{
        file:{
            required:true
        },
        adUrl:{
            required:true,
            url:true
        },
        datepicker1:{
            required:true,
            date:true
        },
        datepicker2:{
            required:true,
            date:true,
        }
    },
    messages:{      
        file:{
            required:"Please Select a frequency"
        },
        adUrl:{
            required:"Please enter ad url"
        },
        datepicker1:{
            required:"Please Enter a date",
            date:"Please Enter a valid date"    
        },
        datepicker2:{
            required:"Please Enter a date",
            date:"Please Enter a valid date"
        }
    }
}
</script>

Answer 2

Change $().ready(function() to $(document).ready(function() and ensure the plugin files and jquery.min files have been included on the page.

Answer 3

I think you don't included jQuery and validate libraries because it works fine when you add them in your header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>

$().ready(function(){
$("#formToPushAd").validate({
    rules:{
        file:{
            required:true
        },
        adUrl:{
            required:true,
            url:true
        },
        datepicker1:{
            required:true,
            date:true
        },
        datepicker2:{
            required:true,
            date:true,
        }
    },
    messages:{      
        file:{
            required:"Please Select a frequency"
        },
        adUrl:{
            required:"Please enter ad url"
        },
        datepicker1:{
            required:"Please Enter a date",
            date:"Please Enter a valid date"    
        },
        datepicker2:{
            required:"Please Enter a date",
            date:"Please Enter a valid date"
        }
    }

})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<form enctype="multipart/form-data" action="upload_data.jsp" id="formToPushAd" method="post">
  <table>
    <tr>
      <td width="100px">Ad Image:</td>
      <td>
        <input type="file" name="file" />
      </td>
    </tr>
    <tr>
      <td width="100px">Ad URL:</td>
      <td>
        <input type="text" name="adUrl" />
      </td>
    </tr>
    <tr>
      <td>Starting Date:</td>
      <td>
        <input type="text" id="datepicker1" name="datepicker1" />
      </td>
    </tr>
    <tr>
      <td>Ending Date:</td>
      <td>
        <input type="text" id="datepicker2" name="datepicker2" onchange="dateSelected()" />
      </td>
    </tr>

    <tr>
      <td>
        <input type="submit" />
      </td>
    </tr>

</form>