Question

I’m not quite sure if I understood how to use the validation plugin of jquery. I tried the validation for one input field (set it to required and minimum length to 1). Then I’ve tried to submit the form without entering any value into the input field, but it did not prevent me from submitting it.

My jQuery code looks like this:

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

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

This is what the part of the HTML looks like (since it’s generated, it doesn’t look very pretty):

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

I’m not getting any errors. That’s why I think I didn’t get the syntax of the validation method.

Update: I have no idea why, but it’s working after I’ve made some changes in other parts of jquery. Also I’ve placed the form validation part, at the beginning of the script tag.

Answer 1

Better late than never.

Problem was related to the position where I’ve placed the code. Since I used a Workflow-Tool which had one template for all sites, I couldn’t place the javascript in the templates head section. I had to place it within a td of the table.

If the code was placed before the actual inputs appeared, it wouldn’t work, placing it after the elements did do the trick.