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

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

Answer 2

迟到总比没有好。

问题与我放置代码的位置有关。由于我使用的工作流工具有一个模板用于所有网站，我无法将javascript放在模板头部分。我不得不将它放在桌子的td内。

如果代码是在实际输入出现之前放置的，那么它就不会起作用，在元素确实完成之后放置它。

jQuery表单验证未按预期工作

2 个答案: