Javascript Uncaught ReferenceError: Function is not defined

Question

    function addRole(val)
    {

   if (val == "ADD NEW") 

    {

    $('#RoleModal').modal('show');
    $('#form_role').validate({
            rules:  {
                       Storage Code: { required: true},
                       Storage Location: { required: true},
                    },
            messages:{
                       Storage Code: {required: "This field is Required"},
                       Storage Location: {required: "This field is Required"}
                    }
       }); 
    }
}   

This is my JavaScript code,But this throws a Javascript error ReferenceError: addRole is not defined while i defined that function

This is my View Code

echo form_dropdown('Birth_Certificate_Storage_id['.$key.']', $optionstorage,"",array('class'=>'form-control roleId','id'=>'Birth_Certificate_Storage_id['.$key.']','onchange'=>'addRole(this.options[this.selectedIndex].text)'));
 /* second line for readability  */

Answer 1

corrected code, use the quotes for string keys with space...

   function addRole(val)
    {

   if (val == "ADD NEW") 

    {

    $('#RoleModal').modal('show');
    $('#form_role').validate({
            rules:  {
                       "Storage Code": { required: true},
                       "Storage Location": { required: true},
                    },
            messages:{
                       "Storage Code": {required: "This field is Required"},
                       "Storage Location": {required: "This field is Required"}
                    }
       }); 
    }
}