You are here:

Javascript/Question about validation code java script

Advertisement


Question
Hiii,
How can i put a check before  entering  data into next field if previous is empty. for example i have a login(with fields name and password).if i keep name empty and start putting password in password field.how an alert will be show before entering data in password field( if name field is empty)
<html>
<head> <title> login </title>
<script language="javaScript">
{
which code will be written here
}
</script>
</head>
<body bgcolor="yellow">
<center><h1>Login<h1>
<form name="frm1">
Enter Name    :<input type="text" name="txt1"><br>
Enter Password:<input type="password" name="pass1">


</form>
</body>
</html>
PLEASE help me about this

Answer
Hi Punjab,

Thanks for your question. Below is an updated version of your HTML with JavaScript added that shows an alert if the user attemps to enter anything in the passowrd text box, but the name text box is empty.

Here is the JS Fiddle link as well.

http://jsfiddle.net/Vf5AR/

I hope this was helpful. Please feel free to follow-up if there are any other questions you may  have.

Best Wishes,

Kevin Chisholm


-----------UPDATED CODE------------------------

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <head>
     <title>login</title>
     <style>
        body{
         background-color:yellow;
         text-align:center;
        }
     </style>
  </head>
  <body>
     <h1>Login<h1>
     <form name="frm1">
     Enter Name :<input type="text" name="txt1" id="txt1"><br>
     Enter Password:<input type="password" name="pass1" id="pass1">
     </form>
     <script>
        //get refernce to intput fields
        var txt1 = document.getElementById('txt1');
        var pass1 = document.getElementById('pass1');

        //event handler
        var eventHandler = function(){
         if(txt1.value === ''){
         alert("Please enter a user name before entering a password");
         };
        };

        //create event handler, allowing for older versions of IE
        if (pass1.addEventListener){
         pass1.addEventListener('keyup',eventHandler,false);  
        } else if (pass1.attachEvent) {
         pass1.attachEvent ("onkeyup",eventHandler);
        };
     </script>
  </body>
</html>

-----------UPDATED CODE------------------------

Javascript

All Answers


Ask Experts

Volunteer


Kevin Chisholm

Expertise

I can answer questions about: JavaScript, Object-Oriented JavaScipt, JSON, AJAX, jQuery, HTML, CSS

Experience

I am a Front-End Web Developer living in New York City. I have provided services to titles such as Time.com, TimeForKids.com, SportIllustrated.com, coastalliving.com, People.com, TDAmeritrade.com, and Instyle.com. Being particularly passionate about Object-Oriented JavaScript as well as Web Standards, I spend a fair amount of time writing about / teaching Front-End Web Development techniques. In my free time I enjoy reading about advanced JavaScript, as well as Web Development trends and best practices. My Blog is: http://blog.kevinchisholm.com/ JavaScript-specific blog posts can be found here: http://blog.kevinchisholm.com/category/javascript/

Organizations
NYC Front-end Developers CSS3 / HTML5 The future of front end Front-End Engineers Javascript Syracuse University Alumni Network

Education/Credentials
Syracuse University - VPA - 1983 - 1987

Past/Present Clients
cookingchanneltv.com foodnetwork.com food.com hgtv.com diynetwork.com gactv.com frontdoor.com hgtvremodels.com travelchannel.com Time.com TimeForKids.com SportIllustrated.com coastalliving.com People.com TDAmeritrade.com ramirezco.com njsga.org soccercoliseum.com superdomesports.com afeenj.org

©2016 About.com. All rights reserved.