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