Help with Modifying a bit of javascript

[Scott.Atkinson]

Hi All,

I have this javaascript which validates fields on a form, and if one of the fields are empty or 0 it will turn that field red, but it does it individually and i want it to turn all fields that are in error in red at the same time, can someone help me with the below code on how i can accomplish this

var inputsToCheck = Array('MainDisplayContentChange_txtTitleContent', 'MainDisplayContentChange_txtDescription', 'MainDisplayContentChange_txtjusitification','MainDisplayContentChange_txtDateRequired');
var obj;0

function formCheck() {
	for(var i=0;i<inputsToCheck.length;i++)
	{
	obj = document.getElementById(inputsToCheck[i]);

	if (obj.value == "") {
	    obj.style.backgroundColor = "red";
	    return false
	}
	else {
	    return true
      
	}
	}
}

Im new to javascript so this could be a simple change for someone with more knowledge then my self.

the webpage is built with ASP.Net

Thanks in Advance

[antonioatt]

I think that simply commenting return instructions you obtain what you whant. This way:

var inputsToCheck = Array('MainDisplayContentChange_txtTitleContent', 'MainDisplayContentChange_txtDescription', 'MainDisplayContentChange_txtjusitification','MainDisplayContentChange_txtDateRequired');
var obj;0

function formCheck() {
	for(var i=0;i<inputsToCheck.length;i++)
	{
	obj = document.getElementById(inputsToCheck[i]);

	if (obj.value == "") {
	    obj.style.backgroundColor = "red";
	   // return false
	}
	else {
	    //return true
      
	}
	}

}

[jassi.singh]

You can use validator to validate the fields and use css for invalid field to make it red

[Scott.Atkinson]

hi thanks for the information, but if i comment out the return true or false, the web page will automatically do a Postback which will allow the user to carry on even though there are errors on the page?

@ Jassi.singh hello,

can you tell me in a bit more detail how i could use that method as iv never heard of that before...

Thank you for your time

[Old Pedant]

var inputsToCheck = [
    'MainDisplayContentChange_txtTitleContent',
    'MainDisplayContentChange_txtDescription',
    'MainDisplayContentChange_txtjusitification',
    'MainDisplayContentChange_txtDateRequired'
    ];

function formCheck() 
{
    var okay = true;  // assume all pass
    for(var i=0;i<inputsToCheck.length;i++)
    {
        var obj = document.getElementById(inputsToCheck[i]);
        if (obj.value == "") 
        {
	    obj.style.backgroundColor = "red";
	    okay = false
        } else {
	    obj.style.backgroundColor = "transparent";
	}
	return okay;
    }
}

If you don't change the color *back* from red to transparent, then once a field gets the red background color it will stay like that, irritating your users.

The advice about not returning was correct, so far as it went, but obviously you do need to return something. Sooo...see above.

[Old Pedant]

And the "validator" that Jassi referred to is part of ASP.NET. Look it up in the ASP.NET docs. There are all kinds of built-in validators in ASP.NET. Much more powerful that this little JS snippet.

[Scott.Atkinson]

hi thanks for the information, and the snippet but sadly it is still checking the fields and returning one at a time that is in error, i wont it to check all fields then return the result for all fields not just one....

Any help will be highly appreciated, iv tried taking the Return true/False out and it returns with fields in error but then goes on to do a auto post back so it raises a task that is in error which isnt aloud!

[Old Pedant]

When/how are you invoking the formCheck function?

Are you doing it via

<form ... onsubmit="return formCheck()">

If not, then indeed what you describe could be happening.

Do this:

Bring the page up in the browser.
Click on the VIEW menu of the browser.
Click on SOURCE or PAGE SOURCE menu item.
This will show you the HTML as the browser sees it.
Copy/paste the relevant sections of the HTML here.

[Scott.Atkinson]

Originally Posted by Old Pedant

When/how are you invoking the formCheck function?

Are you doing it via

<form ... onsubmit="return formCheck()">

If not, then indeed what you describe could be happening.

Do this:

Bring the page up in the browser.
Click on the VIEW menu of the browser.
Click on SOURCE or PAGE SOURCE menu item.
This will show you the HTML as the browser sees it.
Copy/paste the relevant sections of the HTML here.

Im running it of a Onclick event from a button you will see onclick=" return Formcheck()"

 <div id="MainDisplayContentChange_BtnRaiseTaskCollection" class="RaiseTaskButtonContainer">
            <div class="my_center_box">
                <a id="MainDisplayContentChange_BtnCancel" style="margin-right: 173px; margin-left:15px;" class="CancelButton" href="javascript:__doPostBack('ctl00$MainDisplayContentChange$BtnCancel','')">Delete</a> 
                    <input type="submit" name="ctl00$MainDisplayContentChange$BtnRaise" value="Raise" onclick="return formCheck();" id="MainDisplayContentChange_BtnRaise" class="RaiseButton" />
                <input type="submit" name="ctl00$MainDisplayContentChange$BtnSave" value="Save" onclick="return SaveFormCheck();" id="MainDisplayContentChange_BtnSave" class="SaveButton" />
            </div>
        </div>