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>

我的目的不仅是验证字段是否已填写，而且只有在正确格式下填写字段后，才提交表单。

我在这里做错了什么？

- DJR

---

我在Firefox开发者工具中的$( "#serviceRtpLogMainForm" ).validate处设置了一个调试点，但它甚至没有到达那里，这让我更加困惑。 - DJR

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

Check Fiddle

- Subash Selvaraj

---

@Subhash，我的表单字段的name属性已经被占用了。我可以使用styleId代替吗？ - DJR

我很惊讶为什么在点击提交按钮时，在Firefox开发者工具中没有到达调试点。 - DJR

没问题，伙计。我已经能够验证必填字段了。谢谢。 - DJR