Uncaught TypeError: Cannot call method 'toString' of null

Question

I'm trying to create a class in JavaScript to validate a form. That'll check the form elements and validate a field if it has a specific attribute.

However, the call to getAttribute isn't returning a value. It doesn't get the value inside another variable, but, if I print, it works well.

Here's the code for my class:

function valida() {
    document.getElementById("msgDiv").innerHTML="";
    var totalErros=0; 
    var x=document.getElementById("frm1");
    for (var i=0;i<x.length;i++){
        var input=document.getElementsByTagName("input")[i];
        var campo=input.getAttribute("id");
        var tipo=input.getAttribute("tipo");
        var nome=input.getAttribute("nome");
        var id=campo.toString(); //the error goes here
        //var valor=_$(id).value;
        alert(campo);

        switch (tipo) {
            case "obrigatorio":
                if(document.getElementById(id).value==""){
                    document.getElementById("msgDiv").innerHTML+="Deu erro no campo "+nome+"<br />"; 
                    totalErros++;}
                    break
            case "oemail":
                if(document.getElementById(id).value==""){
                    document.getElementById("msgDiv").innerHTML+="Deu erro no campo "+nome+"<br />"; 
                    totalErros++;}
                    break
            case "email":
                if(!ValidaEmail(document.getElementById(id).value)){
                    document.getElementById("msgDiv").innerHTML+="O "+nome+" que você informou é inválido "+document.getElementById(id).value+"  <br />"; 
                    totalErros++;}
                    break
            default:
                document.getElementById("msgDiv").innerHTML+="<br />";
        }            
    }
    if(totalErros==0) {  
        document.getElementById("msgDiv").innerHTML="Agora foi "+ totalErros;
        return true;
    }
}

Solution 1

Your problem is this:

var input=document.getElementsByTagName("input")[i];
var campo=input.getAttribute("id");
//...
var id=campo.toString(); //the error goes here

You are getting a given input element and storing it in the variable input. You are then getting the ID of that element and storing it in the variable campo. You then take campo and call toString() on it.

The problem is that at least one input element does not have an ID. Because you cannot call toString on null, you get an error.

You don't actually need to call toString() in the first place. Simply use campo as is. It will either be null (if there is no ID) or a string.

Solution 2

This part of your code piqued my curiosity:

var x=document.getElementById("frm1");
for (var i=0;i<x.length;i++){
    var input=document.getElementsByTagName("input")[i];

This takes the collection of all <input> elements on your page and takes the ith one each time; and who knows what input element you may get.

If you just want to traverse only the elements of the form you're interested in, this is much easier and faster:

var x = document.getElementById('frm1'),
input,
campo;

for (var i = 0, n = x.length; i != n; ++i) {
    input = x.elements[i];
    if (campo = input.id) {
        // rest of your code
    }
}

As you can see, I take the id property instead of the id attribute; this is generally a better thing to do, because changes in properties may not always be reflected in the respective attribute.

Also, the .toString() is superfluous, it's already a string if not null.

Update

As @bfavaretto pointed out in the comment section, this part of your code could also be simplified:

if(document.getElementById(id).value==""){    

to this:

if (input.value == '') {

That would work whether the input element has an id or not

Comments

[bfavaretto]

Also, the calls to document.getElementById(id) in the switch statement can be replaced by input too.

[Toni Cesar A. Amaral]

thank you! How silly of me. hee hee, really some input hasn't an ID.

[Toni Cesar A. Amaral]

Sounds great! I'll rewrite the code according your hints. Thank you. You guys save my job, LOL.

[Ja͢ck]

@ToniCesarA.Amaral Good luck; if you get it working and this answer sufficiently helped you consider to accept it by clicking the check mark :)

[Levi Botelho]

Glad to help :). Consider marking this as the answer if you feel it would help others with the same problem.