having trouble to call function within another function

Question

<script language="JavaScript">

    function formCheck() 
    {
        var getValues = new Array();

        getValues[0] = document.getElementById('jumpMenu');
        getValues[1] = document.getElementById('fName');
        getValues[2] = document.getElementById('lName');
        getValues[3] = document.getElementById('fName');
        getValues[4] = document.getElementById('streetAdr');
        getValues[5] = document.getElementById('city');
        getValues[6] = document.getElementById('state');
        getValues[7] = document.getElementById('zipcode');
        getValues[8] = document.getElementById('country');
        getValues[9] = document.getElementById('dob_m');

        if ( getValues[0].value == 'Select Title' ) 
        {
            document.getElementById('jumpMenu').style.backgroundColor='#FFD2D2';
            return false;
        }
        else if ( getValues[1].value == '' ) 
        {
            document.getElementById('fName').style.backgroundColor='#FFD2D2';           
            document.getElementById('fNameError').innerHTML='field is empty';
            document.getElementById("fNameError").style.fontSize="10px";
            document.getElementById("fNameError").style.color="red";
            document.getElementById("fNameError").style.display="inline";
            return false;
        }
        else if ( getValues[2].value == '' ) 
        {
            document.getElementById("lName").style.backgroundColor="#FFD2D2";
            document.getElementById("lNameError").innerHTML="field is empty";
            document.getElementById("lNameError").style.fontSize="10px";
            document.getElementById("lNameError").style.color="red";
            return false;
        }
        else if ( getValues[4].value == '' ) 
        {
            document.getElementById("streetAdr").style.backgroundColor="#FFD2D2";
            document.getElementById("stNameError").innerHTML="field is empty";
            document.getElementById("stNameError").style.fontSize="10px";
            document.getElementById("stNameError").style.color="red";
            return false;
        }
        else if ( getValues[5].value == '' ) 
        {
            document.getElementById("city").style.backgroundColor="#FFD2D2";
            document.getElementById("cityError").innerHTML="field is empty";
            document.getElementById("cityError").style.fontSize="10px";
            document.getElementById("cityError").style.color="red";
            return false;
        }
        else if ( getValues[6].value == '' ) 
        {
            document.getElementById("state").style.backgroundColor="#FFD2D2";
            document.getElementById("stateError").innerHTML="field is empty";
            document.getElementById("stateError").style.fontSize="10px";
            document.getElementById("stateError").style.color="red";
            return false;
        }
        else if ( getValues[7].value == '' ) 
        {
            document.getElementById("zipcode").style.backgroundColor="#FFD2D2";
            document.getElementById("zipcodeError").innerHTML="field is empty";
            document.getElementById("zipcodeError").style.fontSize="10px";
            document.getElementById("zipcodeError").style.color="red";
            return false;
        }
    }



    function normalColor(val)
    {
        document.getElementById(val).style.backgroundColor="";

    }

</script>

hello all,

well i was writing a code in javascript and as you can see i am performing form validation ... so i declare array and then put date in array and then perform validation using if, else if statement and also using innerHTML to show data in div container.

but these codes showing my un professionl work .. and i really hate this ... so i tried to define new function in which in store error message bit it isn't working well..

function displayMsg(val)
{
        document.getElementById(val).innerHTML="field is empty";
        document.getElementById(val).style.fontSize="10px";
        document.getElementById(val).style.color="red";
}

but when i am calling this function it gives me nothing

else if ( getValues[1].value == '' ) 
{
    document.getElementById('fName').style.backgroundColor='#FFD2D2';           
        displayMsg(fNameError);
        return false;
}

so please kindly help me to figure out and give me some tips to make my code more professional and good.

You could try using the popular JavaScript library called jQuery (jQuery.com) that has lots of plugins you could use for various common web development needs. There is a good jQuery validation plugin that would make your code above to be smaller and elegant IMHO. — Hari Pachuveetil
– Hari Pachuveetil, Commented Apr 19, 2011 at 11:26
thank you. but i m learning Javascript thats why i m only using Javascript to build a validation form — Muzammil
– Muzammil, Commented Apr 19, 2011 at 11:43

Jim Blackler · Accepted Answer · 2011-04-19 11:22:18Z

1

Perhaps you're simply missing quotes from around fNameError

    displayMsg("fNameError");

Regarding making the code a little better you could just evaluate the element once rather than repeatedly, so rather than this:

    function displayMsg(val)
    {
      document.getElementById(val).innerHTML="field is empty";
      document.getElementById(val).style.fontSize="10px";
      document.getElementById(val).style.color="red";
    }

Have this

    function displayMsg(val)
    {
      var element = document.getElementById(val);
      element.innerHTML = "field is empty";
      element.style.fontSize = "10px";
      element.style.color = "red";
    }

It is arguably easier to read and probably slightly faster.

answered Apr 19, 2011 at 11:22

Jim Blackler

23.3k12 gold badges90 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Muzammil Over a year ago

thank you for your quick response well I have tried your code and it is giving positive response but it is only showing red colored in input field and not showing the error message.

Muzammil Over a year ago

codeelse if ( getValues[1].value == '' ) { document.getElementById('fName').style.backgroundColor='#FFD2D2'; displayMsg("fNameError"); return false; } like that

Jim Blackler Over a year ago

Not showing the "field is empty" message? You'd be better off using .setText() actually rather than .innerHTML as the latter is considered poor practice.

Alex · Accepted Answer · 2011-04-19 11:22:59Z

1

I think you forgot the quotation mark. Try calling the function like this:

displayMsg("fNameError");

answered Apr 19, 2011 at 11:22

Alex

5,5091 gold badge34 silver badges38 bronze badges

Collectives™ on Stack Overflow

having trouble to call function within another function

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related