Michal Vlasák Michal Vlasák - 1 month ago 7
Javascript Question

jQuery validation - syntax error

I have the following jQuery code.



$(document).ready(function() {
$("#testform").validate(function() {
rules: {
firstname: {
minlength: 3,
required: true // error is here?
},
surname: {
minlength: 2,
required: true
},
gender: {
notEqualTo: "select"
}
},
messages: {
firstname: {
required: "Zadejte své jméno",
minlength: "Jméno musí mít délku alespoň 3 znaky"
},
surname: {
required: "Zadejte své příjmení",
minlength: "Jméno musí mít délku alespoň 2 znaky"
},
gender: {
notEqualTo: "Zvolte pohlaví"
}
},
errorContainer: "#errors"
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>





My web console displays me, that on line 6 (
rules.firstname.required
) is some syntax error. I can't see it. I tried also to switch
minlength
and
required
but the error still stays on the same line.

Can somebody see it?

Answer

Solution

Your error is that you're passing a function into validate:

$("#testform").validate(function() { // <-- here you're passing a function
  // ...
})

where validate expects an object instead:

$("#testform").validate({ // <-- but you should pass an object
  // ...
});

The syntax error is a consequence of declaring object properties on a function expression.

$("#testform").validate(function() {
  rules: { // <-- (*)
    // ... 
  },
  // ...
})

(*) You're trying to define a property on an object but are declaring a label statement within a function expression.


Syntax Error Explanation

Defining a property on a function expression is valid syntax, although that is not actually what is happening. All that means is that you're declaring a label statement which has a label and a body and just happens to be within a function expression:

var x = function() {
  rules: {} // label statement with label 'rules' and a body block expression
}

console.log(x.rules); // undefined. Not really useful 

Parse Tree for the code above.

Nesting these label statements is also valid:

var x = function() {
  rules: {       // label statement with label 'rules' and a body block expression
    name: 'test' // label statement with label 'name' and a literal expression 'test'
  }
}

console.log(x.rules); // undefined 

Parse Tree for the code above

As a matter of fact, we can even define label statements on their own:

rules: {} // valid syntax for a labeled statement with a label "rules" and a body block expression

Parse Tree for the code above

The syntax error happens once you add a second label by wrongly assuming you are adding properties to an object.

More accurately, the problem is the , (Comma Operator), which expects an expression but we're giving it a labeled statement instead:

rules: {},   // label statement with label 'rules' and a body block expression
messages: {} // <-- syntax error: thing before the comma is not an expression

Not having the , would eliminate the error since we would just have two independent labeled statements:

rules: {}    // label statement with label 'rules' and a body block expression
messages: {} // label statement with label 'messages' and a body block expression

That's why the error is on line 6, because that is right after the first ,. Removing all the commas will remove your syntax error and leave you with a bunch of labeled statements:

$(document).ready(function(){
    $("#testform").validate(function(){
        rules: {
            firstname: {
                minlength: 3
                required: true
            }
            surname: {
                minlength: 2
                required: true
            }
            gender: {
                notEqualTo: "select"
            }
        }
        messages: {
            firstname: {
                required: "Zadejte své jméno"
                minlength: "Jméno musí mít délku alespoň 3 znaky"
            }
            surname: {
                required: "Zadejte své příjmení"
                minlength: "Jméno musí mít délku alespoň 2 znaky"
            }
            gender: {
                notEqualTo: "Zvolte pohlaví"
            }
        }
        errorContainer: "#errors"
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>

Of course, this would still leave a bug in your code because you're passing wrong arguments to validate but at least would run :)