Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Simple validation Issue 1

Status
Not open for further replies.

vishalonne

Technical User
Jul 29, 2012
49
Hello..!

I just want to show an error message if user left text box blank. Here is my code on form.php, I really can find the problem...
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Your Valuable Suggestion</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
<script type="text/javascript">
function notEmpty(elem, helperMsg){
	alert("Out");
	if(elem.value.length == 0){
		alert(helperMsg);
		elem.focus();
		return false;
	}
	return true;
}
</script>
</head>
<body id="main_body" >
<img id="top" src="top.png" alt="">
<div id="form_container">
<form id="form_453570" class="appnitro"  method="post" action="insertform.php">
  <div class="form_description">
    <ul >
      <li id="li_12" >
	<label class="description" for="element_12">First Name <font color="#EC0006">*</font> </label>
	<div>
	<input id="element_12" name="element_12" class="element text large" type="text" maxlength="255" value="" onblur="notEmpty(document.getElementById('element_12'), 'Please Enter a Value')"/> 
	</div> 
      </li>		
      <li id="li_13">
	<label class="description" for="element_13">Last Name <font color="#EC0006">*</font></label>
	<div>
	<input id="element_13" name="element_13" class="element text large" type="text" maxlength="255" value="" onblur="notEmpty(document.getElementById('element_13'), 'Please Enter a Value')"/> 
	</div> 
      </li>	
      <li class="buttons">
	<input type="hidden" name="form_id" value="453570" />
	<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
      </li>
    </ul>
</form>	
</body>
</html>
Thankyou in advance for any advice or help
 
Thanx Feherke for giving time to look into. I mean to say I can't able to find the problem
 
I simply not doing anything... means if I leave the textbox without entering any thing it not showing any error message, even out is not coming in alert box...[sad]
 
Hi

[ul]
[li]If I leave an [tt]input[/tt] without filling it, I get two [tt]alert()[/tt]s : "Out", then "Please Enter a Value".[/li]
[li]If I leave an [tt]input[/tt] while it is filled, I get one [tt]alert()[/tt] : "Out".[/li]
[/ul]

Maybe that view.js does something nasty, but what you posted so far works for me as expected[sup](*)[/sup] in Gecko, Presto and Webkit.

[small](*) Note that I expected the endless focus ping-pong in which Opera enters.[/small]


Feherke.
[link feherke.github.com/][/url]
 
Okay Feherke... ! figure it out...
If I remove this line <script type="text/javascript" src="view.js"></script> it works, now issue is I need this js file also. How can be it done?
 
Like feherke pointed out, there is likely something wrong in view.js. Post the code and we may be able to help you figure out the problem.

As a start look at your Browser's error console, see if any JS errors are showing up there.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Okay here is the link where you can see the effect of view.js, I downloaded this file from a site.

Effect.

And from this link you can down load the js file Download view.js

For quick reference here is the code-
JavaScript:
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3(7.X){7["R"+a]=a;7["z"+a]=6(){7["R"+a](7.1k)};7.X("1e",7["z"+a])}E{7.19("z",a,15)}2 j=H V();6 a(){2 e=q.1d("1a");3(e){o(e,"P");2 N=B(q,"*","14");3((e.12<=10)||(N=="")){c(e,"P",d)}}4=B(q,"*","1n");k(i=0;i<4.b;i++){3(4[i].F=="1g"||4[i].F=="1f"||4[i].F=="1c"){4[i].1b=6(){r();c(v.5.5,"f",d)};4[i].O=6(){r();c(v.5.5,"f",d)};j.D(j.b,0,4[i])}E{4[i].O=6(){r();c(v.5.5,"f",d)};4[i].18=6(){o(v.5.5,"f")}}}2 C=17.16.13();2 A=q.M("11");3(C.K("J")+1){c(A[0],"J",d)}3(C.K("I")+1){c(A[0],"I",d)}}6 r(){k(2 i=0;i<j.b;i++){o(j[i].5.5,"f")}}6 B(m,y,w){2 x=(y=="*"&&m.Y)?m.Y:m.M(y);2 G=H V();w=w.1m(/\\-/g,"\\\\-");2 L=H 1l("(^|\\\\s)"+w+"(\\\\s|$)");2 n;k(2 i=0;i<x.b;i++){n=x[i];3(L.1j(n.8)){G.1i(n)}}1h(G)}6 o(p,T){3(p.8){2 h=p.8.Z(" ");2 U=T.t();k(2 i=0;i<h.b;i++){3(h[i].t()==U){h.D(i,1);i--}}p.8=h.S(" ")}}6 c(l,u,Q){3(l.8){2 9=l.8.Z(" ");3(Q){2 W=u.t();k(2 i=0;i<9.b;i++){3(9[i].t()==W){9.D(i,1);i--}}}9[9.b]=u;l.8=9.S(" ")}E{l.8=u}}',62,86,'||var|if|elements|parentNode|function|window|className|_16|initialize|length|addClassName|true|_1|highlighted||_10||el_array|for|_13|_6|_c|removeClassName|_e|document|safari_reset||toUpperCase|_14|this|_8|_9|_7|load|_4|getElementsByClassName|_3|splice|else|type|_a|new|firefox|safari|indexOf|_b|getElementsByTagName|_2|onfocus|no_guidelines|_15|event_load|join|_f|_11|Array|_17|attachEvent|all|split|450|body|offsetWidth|toLowerCase|guidelines|false|userAgent|navigator|onblur|addEventListener|main_body|onclick|file|getElementById|onload|radio|checkbox|return|push|test|event|RegExp|replace|element'.split('|'),0,{}))

 
Hi

After including that view.js the [tt]onblur[/tt] event handlers get replaced with this :
JavaScript:
[b]function[/b] [teal]()[/teal] [teal]{[/teal]
    [COLOR=darkgoldenrod]removeClassName[/color][teal]([/teal][b]this[/b][teal].[/teal]parentNode[teal].[/teal]parentNode[teal],[/teal] [green][i]"highlighted"[/i][/green][teal]);[/teal]
[teal]}[/teal]
Not really what you put there.

As a solution I would delete view.js. If it not plays nicely with other code it will probably cause more problems in the future.

As an alternative solution I would move the setting of event handlers in a [tt]script[/tt] section at the end of page :
JavaScript:
document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'element_12'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]addEventListener[/color][teal]([/teal][green][i]'blur'[/i][/green][teal],[/teal][b]function[/b][teal]()[/teal][teal]{[/teal][COLOR=darkgoldenrod]notEmpty[/color][teal]([/teal][b]this[/b][teal],[/teal][green][i]'Please Enter a Value'[/i][/green][teal])[/teal][teal]}[/teal][teal],[/teal][b]false[/b][teal])[/teal]
document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'element_13'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]addEventListener[/color][teal]([/teal][green][i]'blur'[/i][/green][teal],[/teal][b]function[/b][teal]()[/teal][teal]{[/teal][COLOR=darkgoldenrod]notEmpty[/color][teal]([/teal][b]this[/b][teal],[/teal][green][i]'Please Enter a Value'[/i][/green][teal])[/teal][teal]}[/teal][teal],[/teal][b]false[/b][teal])[/teal]


Feherke.
[link feherke.github.com/][/url]
 
Hi

Forgot one thing : [tt]addEventListener()[/tt] is the standard way of setting event handlers. If you need it in non-standard browsers[sup](*)[/sup] too, you will have to write a branch to also use attachEvent() when necessary.

[small](*) I mean Exporer 8.0 or older.[/small]

Feherke.
[link feherke.github.com/][/url]
 
Please can you give me an idea where I shall use your second option
JavaScript:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Your Valuable Suggestion</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
<script type="text/javascript">
function notEmpty(elem, helperMsg){
	alert("Out");
	if(elem.value.length == 0){
		alert(helperMsg);
		elem.focus();
		return false;
	}
	return true;
}
</script>
</head>
<body id="main_body" >
<img id="top" src="top.png" alt="">
<div id="form_container">
<form id="form_453570" class="appnitro"  method="post" action="insertform.php">
  <div class="form_description">
    <ul >
      <li id="li_12" >
	<label class="description" for="element_12">First Name <font color="#EC0006">*</font> </label>
	<div>
	<input id="element_12" name="element_12" class="element text large" type="text" maxlength="255" value="" onblur="notEmpty(document.getElementById('element_12'), 'Please Enter a Value')"/> 
	</div> 
      </li>		
      <li id="li_13">
	<label class="description" for="element_13">Last Name <font color="#EC0006">*</font></label>
	<div>
	<input id="element_13" name="element_13" class="element text large" type="text" maxlength="255" value="" onblur="notEmpty(document.getElementById('element_13'), 'Please Enter a Value')"/> 
	</div> 
      </li>	
      <li class="buttons">
	<input type="hidden" name="form_id" value="453570" />
	<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
      </li>
    </ul>
</form>	
</body>
</html>
 
Hi

By "in a [tt]script[/tt] section at the end of page" I mean :
Code:
[gray]<!-- ... -->[/gray]
      [b]<li[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"buttons"[/i][/green][b]>[/b]
	[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"hidden"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"form_id"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"453570"[/i][/green] [b]/>[/b]
	[b]<input[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"saveForm"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"button_text"[/i][/green] [maroon]type[/maroon][teal]=[/teal][green][i]"submit"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"submit"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"Submit"[/i][/green] [b]/>[/b]
      [b]</li>[/b]
    [b]</ul>[/b]
[b]</form>[/b]
[highlight][b]<script[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text/javascript"[/i][/green][b]>[/b][/highlight]
[highlight]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'element_12'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]addEventListener[/color][teal]([/teal][green][i]'blur'[/i][/green][teal],[/teal][b]function[/b][teal]()[/teal][teal]{[/teal][COLOR=darkgoldenrod]notEmpty[/color][teal]([/teal][b]this[/b][teal],[/teal][green][i]'Please Enter a Value'[/i][/green][teal])[/teal][teal]}[/teal][teal],[/teal][b]false[/b][teal])[/teal][/highlight]
[highlight]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'element_13'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]addEventListener[/color][teal]([/teal][green][i]'blur'[/i][/green][teal],[/teal][b]function[/b][teal]()[/teal][teal]{[/teal][COLOR=darkgoldenrod]notEmpty[/color][teal]([/teal][b]this[/b][teal],[/teal][green][i]'Please Enter a Value'[/i][/green][teal])[/teal][teal]}[/teal][teal],[/teal][b]false[/b][teal])[/teal][/highlight]
[highlight][b]</script>[/b][/highlight]
[b]</body>[/b]
[b]</html>[/b]


Feherke.
[link feherke.github.com/][/url]
 
I removed the previuos script and added as you instructed now the code look like this -

JavaScript:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Your Valuable Suggestion</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
<!-- Previous Code deleted -->
</head>
<body id="main_body" >
<img id="top" src="top.png" alt="">
<div id="form_container">
<form id="form_453570" class="appnitro"  method="post" action="insertform.php">
  <div class="form_description">
    <ul >
      <li id="li_12" >
	<label class="description" for="element_12">First Name <font color="#EC0006">*</font> </label>
	<div>
	<input id="element_12" name="element_12" class="element text large" type="text" maxlength="255" value="" onblur="notEmpty(document.getElementById('element_12'), 'Please Enter a Value')"/> 
	</div> 
      </li>		
      <li id="li_13">
	<label class="description" for="element_13">Last Name <font color="#EC0006">*</font></label>
	<div>
	<input id="element_13" name="element_13" class="element text large" type="text" maxlength="255" value="" onblur="notEmpty(document.getElementById('element_13'), 'Please Enter a Value')"/> 
	</div> 
      </li>	
      <li class="buttons">
	<input type="hidden" name="form_id" value="453570" />
	<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
      </li>
    </ul>
</form>	
<script type="text/javascript">
document.getElementById('element_12').addEventListener('blur',function(){notEmpty(this,'Please Enter a Value')},false)
document.getElementById('element_13').addEventListener('blur',function(){notEmpty(this,'Please Enter a Value')},false)
</script>
</body>
</html>

Is this fine ?
 
Hi

No.
[ul]
[li]The declaration of noEmpty() function is still needed.[/li]
[li]The [tt]onblur[/tt] attributes of the [tt]input[/tt] tags are unnecessary.[/li]
[/ul]
Code:
[b]<html>[/b]
[b]<head>[/b]
[b]<meta[/b] [maroon]http-equiv[/maroon][teal]=[/teal][green][i]"Content-Type"[/i][/green] [maroon]content[/maroon][teal]=[/teal][green][i]"text/html; charset=UTF-8"[/i][/green][b]>[/b]
[b]<title>[/b]Your Valuable Suggestion[b]</title>[/b]
[b]<link[/b] [maroon]rel[/maroon][teal]=[/teal][green][i]"stylesheet"[/i][/green] [maroon]type[/maroon][teal]=[/teal][green][i]"text/css"[/i][/green] [maroon]href[/maroon][teal]=[/teal][green][i]"view.css"[/i][/green] [maroon]media[/maroon][teal]=[/teal][green][i]"all"[/i][/green][b]>[/b]
[b]<script[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text/javascript"[/i][/green] [maroon]src[/maroon][teal]=[/teal][green][i]"view.js"[/i][/green][b]></script>[/b]
[b]<script[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text/javascript"[/i][/green][b]>[/b]
[b]function[/b] [COLOR=darkgoldenrod]notEmpty[/color][teal]([/teal]elem[teal],[/teal] helperMsg[teal])[/teal][teal]{[/teal]
	[COLOR=darkgoldenrod]alert[/color][teal]([/teal][green][i]"Out"[/i][/green][teal]);[/teal]
	[b]if[/b][teal]([/teal]elem[teal].[/teal]value[teal].[/teal]length [teal]==[/teal] [purple]0[/purple][teal])[/teal][teal]{[/teal]
		[COLOR=darkgoldenrod]alert[/color][teal]([/teal]helperMsg[teal]);[/teal]
		elem[teal].[/teal][COLOR=darkgoldenrod]focus[/color][teal]();[/teal]
		[b]return[/b] [b]false[/b][teal];[/teal]
	[teal]}[/teal]
	[b]return[/b] [b]true[/b][teal];[/teal]
[teal]}[/teal]
[b]</script>[/b]
[b]</head>[/b]
[b]<body[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"main_body"[/i][/green] [b]>[/b]
[b]<img[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"top"[/i][/green] [maroon]src[/maroon][teal]=[/teal][green][i]"top.png"[/i][/green] [maroon]alt[/maroon][teal]=[/teal][green][i]""[/i][/green][b]>[/b]
[b]<div[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"form_container"[/i][/green][b]>[/b]
[b]<form[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"form_453570"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"appnitro"[/i][/green]  [maroon]method[/maroon][teal]=[/teal][green][i]"post"[/i][/green] [maroon]action[/maroon][teal]=[/teal][green][i]"insertform.php"[/i][/green][b]>[/b]
  [b]<div[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"form_description"[/i][/green][b]>[/b]
    [b]<ul[/b] [b]>[/b]
      [b]<li[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"li_12"[/i][/green] [b]>[/b]
	[b]<label[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"description"[/i][/green] [maroon]for[/maroon][teal]=[/teal][green][i]"element_12"[/i][/green][b]>[/b]First Name [b]<font[/b] [maroon]color[/maroon][teal]=[/teal][green][i]"#EC0006"[/i][/green][b]>[/b]*[b]</font>[/b] [b]</label>[/b]
	[b]<div>[/b]
	[b]<input[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"element_12"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"element_12"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"element text large"[/i][/green] [maroon]type[/maroon][teal]=[/teal][green][i]"text"[/i][/green] [maroon]maxlength[/maroon][teal]=[/teal][green][i]"255"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green][b]/>[/b] 
	[b]</div>[/b] 
      [b]</li>[/b]		
      [b]<li[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"li_13"[/i][/green][b]>[/b]
	[b]<label[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"description"[/i][/green] [maroon]for[/maroon][teal]=[/teal][green][i]"element_13"[/i][/green][b]>[/b]Last Name [b]<font[/b] [maroon]color[/maroon][teal]=[/teal][green][i]"#EC0006"[/i][/green][b]>[/b]*[b]</font></label>[/b]
	[b]<div>[/b]
	[b]<input[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"element_13"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"element_13"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"element text large"[/i][/green] [maroon]type[/maroon][teal]=[/teal][green][i]"text"[/i][/green] [maroon]maxlength[/maroon][teal]=[/teal][green][i]"255"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green][b]/>[/b] 
	[b]</div>[/b] 
      [b]</li>[/b]	
      [b]<li[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"buttons"[/i][/green][b]>[/b]
	[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"hidden"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"form_id"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"453570"[/i][/green] [b]/>[/b]
	[b]<input[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"saveForm"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"button_text"[/i][/green] [maroon]type[/maroon][teal]=[/teal][green][i]"submit"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"submit"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"Submit"[/i][/green] [b]/>[/b]
      [b]</li>[/b]
    [b]</ul>[/b]
[b]</form>[/b]	
[b]<script[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text/javascript"[/i][/green][b]>[/b]
document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'element_12'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]addEventListener[/color][teal]([/teal][green][i]'blur'[/i][/green][teal],[/teal][b]function[/b][teal]()[/teal][teal]{[/teal][COLOR=darkgoldenrod]notEmpty[/color][teal]([/teal][b]this[/b][teal],[/teal][green][i]'Please Enter a Value'[/i][/green][teal])[/teal][teal]}[/teal][teal],[/teal][b]false[/b][teal])[/teal]
document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'element_13'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]addEventListener[/color][teal]([/teal][green][i]'blur'[/i][/green][teal],[/teal][b]function[/b][teal]()[/teal][teal]{[/teal][COLOR=darkgoldenrod]notEmpty[/color][teal]([/teal][b]this[/b][teal],[/teal][green][i]'Please Enter a Value'[/i][/green][teal])[/teal][teal]}[/teal][teal],[/teal][b]false[/b][teal])[/teal]
[b]</script>[/b]
[b]</body>[/b]
[b]</html>[/b]


Feherke.
[link feherke.github.com/][/url]
 
Feherke Problem solved...![afro2]
But not for IE. I am using IE 8 it is not working but in FireFox 14 it works. And with message it showing one statement with check box "Prevent this page from creating additional dialogs"

Why?
 
Hi

As I mentioned, Explorer 8 and older not knows the [tt]addEventListener()[/tt] method. See element.addEventListener | Notes | Legacy Internet Explorer and attachEvent for example on conditionally using either [tt]addEventListener()[/tt] or attachEvent().

All modern browsers are adding checkboxes to permanently stop [tt]alert()[/tt]s on a page if they detect repeated and possibly abusive use of the modal dialog methods.

Feherke.
[link feherke.github.com/][/url]
 
OK thanx of lot Feherke for your extensive co operation. Now finally I reached on a conclusion that I should remove the view.js for better performance as decoration is not so important for site in comparison to data.

Thank you again as I am new in this field of PHP and Java Script I may distrub you again. I am just trying to do some thing for XI and XII students in free who can't afford to pay for private tution classes.

I saw your site also it's impressive. But I didn't got any contact over there.

regards to you
Vishal Deb
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top