Jquery 表单验证提交处理程序不起作用

Question

我有一个现有的应用程序，它使用 JavaScript 进行表单验证，我试图用 jQuery 替换它。我的表单最多有 20 个字段，而我现在只尝试验证一个字段。

这是我编写的用于验证一个字段的 jQuery 函数。

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

 //});
});

下面是如何验证表单、提交和相关字段。

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

我的目的不是仅仅验证该字段是否已填写，并且仅在该字段以正确的格式填写时才提交表单。

我在这里做错了什么？

Answer 1

确保您的 html 如下所示，

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

脚本是

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

        });

      });

检查Fiddle

或者 如果您不想使用 name 属性，请将 class 属性添加到您的元素并添加如下规则，

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

检查Fiddle