jQuery表单验证未按预期工作

Question

我不太清楚如果我了解如何使用jquery的验证插件。我尝试验证一个输入字段（将其设置为必需，最小长度设置为1）。然后，我试图提交表单而不在输入字段中输入任何值，但它并未阻止我提交它。

我的jQuery代码看起来是这样的：

$(document).ready(function() { 
    // ... other non relevant code ... 

    $("#organisationsantrag").validate({ 
     rules: { 
      ouKostenstelle: { 
       required: true, 
       minlength: 1 
      } 
     }, 
     messages: { 
      ouKostenstelle: { 
       required: "Nothing entered", 
       minlength: "Too short" 
      } 
     } 
    }) 
}) 

这就是HTML的部分看起来像（因为它产生的，它看起来并不很漂亮）：

<table> 
    <tr> 
     <td> 
      <FORM NAME="formAbschicken" METHOD="POST" ACTION='http://target' ID="organisationsantrag"> 
       <table BORDER="0"> 
        <tr> 
         <td COLSPAN="2"><HR width="100%"></td> 
        </tr> 
        <tr> 
         <td>Antragsteller</td> 
         <td><INPUT TYPE="TEXT" NAME="cnAntragsteller" ID="cnAntragsteller" VALUE=""></td> 
        </tr> 
        <tr> 
         <td COLSPAN="2"><HR width="100%" class="trennlinie"></td> 
        </tr> 
        <tr> 
         <td><P CLASS="ouName">Name der OE</P></td>  
         <td><INPUT TYPE="TEXT" NAME="ouName" CLASS="ouName" ID="ouName" READONLY="READONLY" VALUE=""></td>  
        </tr> 
        <tr> 
         <td><P CLASS="ouNummer">Betrieb</P></td>  
         <td><INPUT TYPE="TEXT" NAME="ouNummer" CLASS="ouNummer" ID="ouNummer" READONLY="READONLY" VALUE=""></td>  
        </tr> 
        <tr> 
         <td><P CLASS="ouKostenstelle">Kostenstelle</P></td> 
         <td><INPUT TYPE="TEXT" NAME="ouKostenstelle" CLASS="ouKostenstelle" ID="ouKostenstelle" VALUE=""></td>  
        </tr> 
        <tr> 
         <td COLSPAN="2"><HR width="100%" class="trennlinie"></td> 
        </tr> 
        <tr> 
         <td><P CLASS="jbdAntragsteller">Bezeichnung der Funktion</P></td> 
         <td><INPUT TYPE="TEXT" NAME="jbdAntragsteller" CLASS="jbdAntragsteller" ID="jbdAntragsteller" READONLY="READONLY" VALUE=""></td>  
        </tr> 
        <tr> 
         <td><P CLASS="jbAntragsteller">Planstellen-Nr.</P></td>  
         <td><INPUT TYPE="TEXT" NAME="jbAntragsteller" CLASS="jbAntragsteller" ID="jbAntragsteller" READONLY="READONLY" VALUE=""></td>  
        </tr> 
        <tr> 
         <td><P CLASS="ccAntragsteller">Kostenstelle</P></td> 
         <td><INPUT TYPE="TEXT" NAME="ccAntragsteller" CLASS="ccAntragsteller" ID="ccAntragsteller" READONLY="READONLY" VALUE=""></td>  
        </tr> 
        <tr> 
         <td><P CLASS="pnAntragsteller">Personalnummer</P></td> 
         <td><INPUT TYPE="TEXT" NAME="pnAntragsteller" CLASS="pnAntragsteller" ID="pnAntragsteller" READONLY="READONLY" VALUE=""></td> 
        </tr> 
        <tr> 
         <td><P CLASS="cnLeiter">Übergeordneter Leiter</P></td> 
         <td><INPUT TYPE="TEXT" NAME="cnLeiter" CLASS="cnLeiter" ID="cnLeiter" READONLY="READONLY" VALUE=""></td> 
        </tr> 
        <tr> 
         <td COLSPAN="2"><HR width="100%"></td> 
        </tr> 
        <tr> 
         <td>Visiert durch</td> 
         <td><INPUT TYPE="TEXT" NAME="cnVisum" ID="cnVisum" READONLY="READONLY" VALUE="Current User"></td> 
        </tr> 
        <tr> 
         <td><P CLASS="directors">Managing Director</P></td>  
         <td><select name="directors" size="0" CLASS="directors" ID="directors" ></select></td>  
        </tr> 
        <tr></tr>  
        <tr> 
         <td></td>  
         <td><INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Submit"></td>  
        </tr> 
       </table> 
      </FORM> 
     </td> 
    </tr> 
</table> 

我没有得到任何错误。这就是为什么我认为我没有得到验证方法的语法。

更新：我不知道为什么，但它是在我对jquery的其他部分进行了一些更改后工作的。我还在表单验证部分放置了脚本标记的开头。

Answer 1

比从未更好的迟到。

问题与我放置代码的位置有关。由于我使用了一个工作流程工具，它为所有网站提供了一个模板，所以我无法将JavaScript放在模板头部分。我必须把它放在桌子的一个td内。

如果代码在实际输入出现之前被放置，它将无法工作，将其放置在元素确实做到了这一点之后。

Answer 2

$('[type="submit"]').live('click', function(e) { 
    if (!$(this).parents('form').valid()) { 
     return false; 
    } 
});