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 库，因为当您将它们添加到 header[时，工作正常 =15=]

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

Answer 2

将 $().ready(function() 更改为 $(document).ready(function() 并确保页面上包含插件文件和 jquery.min 文件。

Answer 3

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

演示：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>

jQuery 验证器不工作

jQuery validator not working

javascript

jquery

jquery-validate