JQuery works for some forms and not working for others

Question

I have some issues with JQuery. I wrote application with one index file for each component like: account, admin etc. In each index.php I check for action variable and include some other php files or forms. For some forms my validate code works fine for others not.

As an example I will give you two files in account component:

account_register: (not working one)

<script>
    // Required 

    $().ready(function() {
    $('<span style="color:red;">*</span>').insertAfter('.required');
    });

    $().ready(function(){
        $("#login_form").validate({
            rules: {
            login: {
                "required"
            },
            password: {
                "required"
            }
            },
 errorElement: "span",   
 errorPlacement: function(error, element) {
        error.insertAfter(element);
 }                
        });
    });   

and working one:

account_register.php:

<script>
    // Required 

    $().ready(function() {
    $('<span style="color:red;">*</span>').insertAfter('.required');
    });

     // register_form geburtsdatum date   

    $().ready(function(){
        $( "#datepicker" ).datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "-100:+0",
        dateFormat: 'yy-mm-dd'
        });
    });

    // register_form validate

    $().ready(function(){
        $("#register_form").validate({
            rules: {
            login: {
                required: true,
                remote: "validate_register_login.php"
            },
            name: "required",
            vorname: "required",
            sex: "required",
            geburtsdatum: {
                required: true,
                date: true
            },
            golfclub: {
                required: true
            },
            handicap: {
                required: true,
                number: true
            },
            password_1: {
                required: true,
                minlength: 6
            },
            password_2: {
                required: true,
                equalTo: "#password_1",
                minlength: 6
            },
            email: {
                required: true,
                email: true,
                remote: "validate_register_email.php"
            }
            },
            messages: {
                handicap: "Geben Sie bitte einen Punkt ein !",
                login: {
                    remote: jQuery.format("{0} is already in use")
                },
                email: {
                    remote: jQuery.format("{0} is already in use")
                }
            },
 errorElement: "span",   
 errorPlacement: function(error, element) {
     if (element.attr('type') === 'radio') {
        error.insertAfter(
        element.siblings('input[type="radio"][name="' + element.attr('name') + '"]:last'));
        }
    else {
    error.insertAfter(element);
    }
 }                
        });
    });    

Any idea what can be wrong?

Answer 1

Your format is invalid....

rules: {
    login: {
        "required"  // <- invalid - cannot enclose this in braces
    },
    password: {
        "required"  // <- invalid - cannot enclose this in braces
    }
}

Only key: value pairs go inside braces; and comma separated when more than one pair,

{
    key: value,
    key: value,
    ....
}

So you can do it like this... (notice the configuration of braces and key: value pairs)

rules: {
    login: "required",
    password: "required"
}

or long-hand like this... (again, notice that you still have key:value pairs, but this time, the value's themselves are additional key:value pairs)

rules: {
    login: {
        required: true
    },
    password: {
        required: true
    }
}

Answer 2

In the working one you gave

login: { required: true,

But in not working you gave

login: { "required"

I believe required:true is the valid. You can easily figure this out in console as said in the previous comment.