Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Help with Modifying a bit of javascript

    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

    Code:
    
    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

  • #2
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I think that simply commenting return instructions you obtain what you whant. This way:
    Code:
    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
          
    	}
    	}
    
    }

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    103
    Thanks
    0
    Thanked 14 Times in 14 Posts
    You can use validator to validate the fields and use css for invalid field to make it red

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New Coder
    Join Date
    Sep 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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!

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    When/how are you invoking the formCheck function?

    Are you doing it via
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    Sep 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    When/how are you invoking the formCheck function?

    Are you doing it via
    Code:
    <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()"

    Code:
     <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •