Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Trivial form validation using javascript


  • Please log in to reply
7 replies to this topic

#1 comet@earth

comet@earth

  • Members
  • 170 posts
  • OFFLINE
  •  
  • Local time:07:12 AM

Posted 03 August 2012 - 08:21 AM

<html>

<head>
<script type="text/javascript">

function test()
{
	if(form1.uname.value=="")
	{
		document.getElementById("errmsg2").innerHTML="<font color='red'>Please enter a valid username</font>";
		document.form1.uname.focus();
				
		
	}
	else if(form1.pwd.value=="")
	{
		document.getElementById("errmsg").innerHTML="<font color='red'>Please enter a valid password</font>";
		document.form1.pwd.focus();
				

	}

	else if(form1.pwd.value.length<=5)
	{
		document.getElementById("errmsg1").innerHTML="<font color='red'>Please enter a password of valid length</font>";
		document.form1.pwd.focus();
		
	}	
	 
	
}

function Pause()
 {
	timer = setTimeout("endpause()",3000); 
	return false;
}


</script>
</head>

<body>
<form name="form1">
<center>
<table cellpadding="10">
<tr>
<td>
<div id="errmsg"></div>
<div id="errmsg1"></div>
<div id="errmsg2"></div>
</td>
</tr>
<tr>
<td>USERNAME:</td>
<td><input type="text" name="uname" size="25"></td>
</tr>

<tr>
<td>PASSWORD:</td>
<td><input type="password" name="pwd" size="25"></td>
</tr>

</table>

<input type="submit" value="Submit" onClick="test()" action="form_action.asp">
<input type="reset" value="Reset">
</center>
</form>
</body>

</html>


The aim is to display error messages if the username field is blank,password field is blank or password field text length is less than 6 characters.I tried doing it using the onBlur event,failed and then did it using submit button's onClick event.The error message is displayed for a split of a second.Kindly help me rectify the errors in both the cases:onClick and onBlur.Thank you in advance.

BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:07:42 PM

Posted 03 August 2012 - 09:14 AM

This is easily answerable from any 1 of a bazillion examples on the internet, so I am not going to give you the answer.

First, why do you expect this to perform in any way other than what you described? When you click submit, it runs the test function, and then submits the form. There is nothing in your javascript to prevent that from happening. The only thing your javascript does is display an error message and set a focus.

What you really want your app to do is:
1. Check the form
2. Return true if it validates correctly
or
3. Display an error message and return a false if validation fails.
4. If TRUE, then submit the form.

Maybe this will help you out:
Look at the sample html (2nd example)

#3 Billy O'Neal

Billy O'Neal

    Visual C++ STL Maintainer


  • Malware Response Team
  • 12,304 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Redmond, Washington
  • Local time:06:42 PM

Posted 03 August 2012 - 11:43 AM

Just don't forget to also do this kind of validation on the server side. Just because your javascript enforces something doesn't mean that the user has javascript enabled. Or that the user is even using your web page to talk to your web service at all.

Billy3
Twitter - My statements do not establish the official position of Microsoft Corporation, and are my own personal opinion. (But you already knew that, right?)
Posted Image

#4 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:07:42 PM

Posted 03 August 2012 - 02:42 PM

Just in case you missed this part of Billy's post:

'Just don't forget to also do this kind of validation on the server side'

#5 comet@earth

comet@earth
  • Topic Starter

  • Members
  • 170 posts
  • OFFLINE
  •  
  • Local time:07:12 AM

Posted 04 August 2012 - 03:06 AM

The focus gets shifted to the succeeding textbox.Please tell me how to implement the onblur method?
Thank You

#6 Billy O'Neal

Billy O'Neal

    Visual C++ STL Maintainer


  • Malware Response Team
  • 12,304 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Redmond, Washington
  • Local time:06:42 PM

Posted 04 August 2012 - 10:24 AM

comet@earth: You've entered the area of crazy browser incompatibilities. First of all, IE calls that event onlostfocus, so that's fun to deal with, and the different browsers have different ways to attach event handlers. If you're going to be writing anything serious, I would *strongly* recommend embedding JQuery: http://jquery.com/ which smooths over all the different ways browsers do things.

Billy3
Twitter - My statements do not establish the official position of Microsoft Corporation, and are my own personal opinion. (But you already knew that, right?)
Posted Image

#7 comet@earth

comet@earth
  • Topic Starter

  • Members
  • 170 posts
  • OFFLINE
  •  
  • Local time:07:12 AM

Posted 04 August 2012 - 11:19 AM

Nothing serious.Just implementing my HTML+Javascript knowledge.I am using firefox.I inserted a table.In the first row using inner HTML element i display error messages if either the username/password field is blank or password is less than 5 characters.I tried using onBlur but it did not work properly(If you would run the code you will come to know).Then I used submit and I got the result but it is displayed for only a split of a second.So what should I do to make it a decent code.I want to implement it using JS and HTML.Thank you for replying.

#8 Billy O'Neal

Billy O'Neal

    Visual C++ STL Maintainer


  • Malware Response Team
  • 12,304 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Redmond, Washington
  • Local time:06:42 PM

Posted 04 August 2012 - 05:51 PM

I am using firefox.

That does not mean that your users are using Firefox.

Billy3
Twitter - My statements do not establish the official position of Microsoft Corporation, and are my own personal opinion. (But you already knew that, right?)
Posted Image




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users