jQuery验证器无法正常工作

Question

我已经为我的网站添加了jQuery验证，用于上传广告文件.. 我不知道为什么，但这不起作用。

HTML文件如下：

<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>

                     

在此脚本之前添加了jQuery验证脚本

js文件是：

$().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"
            }
        }

    })
});

有什么问题？

Answer 1

我认为您没有包含jQuery和validate个库，因为当您在标题中添加 时正常

<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>

＆＃13;

＆＃13;

$().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"
        }
    }

})
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将$（）。ready（function（）更改为$（document）.ready（function（）并确保页面中包含插件文件和jquery.min文件。

Answer 3

您应该在表单上使用onsubmit来验证数据。您还应该调用e.preventDefault()来防止表单多次触发

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>