www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript form validation only works once, corrected errors remain.

  1. #1
    Join Date
    Jan 2014
    Posts
    7

    Javascript form validation only works once, corrected errors remain.

    Hi list,


    I have a simple page with a form a a Javascript formvalidation function. The first time when I fill in the fields errors like 'too long' are neatly displayed but once corrected the error messages remain.

    Any help would be greatly appreciated.

    The source is below.

    j@n

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <html>
    <head>
    <meta name="description" content="JED:SP RACF">
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "./css/RACF.css";</style>
    
    <title>RACF Access Check</title>
    <script>
    Code:
    function valf(frm)
    	{
    	var elems=frm.elements,
    	len=elems.length,
    	skipped='submit,reset',
    	isvalid=true;
    	if(!valf.ret)
    		{
    		valf.ret={};
    		}
    //	var alfanum=/^[A-Za-z0-9]+$/
    	for(var i=0; i < len; i++)
    		{
    		if(skipped.indexOf(elems[i].type) !=-1)
    			{
    			continue;
    			}
    		else
    			{
    			var td=document.getElementsByName(elems[i].name)[0].parentNode.parentNode.cells[2];
    			td.style.color='#fff';
    			td.style.textAlign='center';
    			td.style.fontWeight='bold';
    /*
    the code below checks only for empty values,
    so change the condition according to your needs
    alert(elems[i].value.length);
    */
    alert(i);
    alert(elems[i].value);			
    			if(!elems[i].value)
    				{
    alert('no value in if');
    				td.innerHTML='<--  can not be empty';
    				td.style.backgroundColor='Crimson';
    				valf.ret[elems[i].name]=false;
    				}
    			
    			else if(i == 0 || i == 2)
    				{
    				if (elems[i].value.length>8)
    					{
    					td.innerHTML='<--  too long';
    					td.style.backgroundColor='Crimson';
    					valf.ret[elems[i].name]=false;
    					}
    				}
    			else if(i == 3)
    				{
    				if (elems[i].value.length>44)
    					{
    					td.innerHTML='<--  too long';
    					td.style.backgroundColor='Crimson';
    					valf.ret[elems[i].name]=false;
    					}
    				}
    			else
    				{
    				td.innerHTML='OK';
    				td.style.backgroundColor='Green';
    				if(valf.ret[elems[i].name] != null)
    					{
    					delete(valf.ret[elems[i].name]);
    					}
    				}
    			}
    		}
    	for(var k in valf.ret)
    		{
    		if(k)
    			{
    			isvalid=valf.ret[k];
    			}
    		}
    	return isvalid;
    	}
    HTML Code:
    </script>
    </head>
    <body>
    <h1> RACF Access Check</H1>
    <p></p><p></p>
    <form name="RACF-Access" id="RACF-Access" onsubmit="return valf(this)">
    <table border=1">
    <colgroup>
    <col width="*50">
    <col width="*44">
    <col width="*156">
    </colgroup>
    <tr>
    <th>Description</th>
    <th>Data</th>
    <th>Information</th>
    </tr>
    <tr>
    <td>Userid or group</td>
    <td><input type="text" size="8" name="userid" autofocus></td>
    <td type="text" id="e_id"></td>
    <tr>
    <td>Authority</td>
    <td><select name="authority">
    <option value="CHECK">CHECK</option>
    <option value="READ">READ</option>
    <option value="UPDATE">UPDATE</option>
    <option value="CONTROL">CONTROL</option>
    <option value="ALTER">ALTER</option>
    <option value="EXECUTE">EXECUTE</option>
    </select>
    </td>
    <td><DIV name="a_autr"</DIV</td>
    </tr>
    <tr>
    <td>Class</td>
    <td><input type="text" size="8" name="class"></td>
    <td><DIV name=e_class"</DIV</td>
    </tr>
    <tr>
    <td>Resource</td>
    <td><input type="text" size="44" name="resource"></td>
    <td><DIV name=e_resource</DIV</td>
    </tr>
    </table>
    <p><img src="./images/jan Einst.Neubauten.jpg" alt="Einst. Neubauten" widtr="159" height="156" align="middle"/></p>
    <input type="submit" value="Check Access">
    </form>
    </body>
    </html>
    <link href="./css/RACF.css" rel="stylesheet" type="text/css">

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,366
    I suggest that you reset the elements at the time of checking then set again if an error is detected, that way the error gets cleared and will remain clear if all is OK on checking.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles