Featured Article

Thursday, 30 October 2014

Javascript Form Validation

Javascript Form Validation

The javascript provides you the facility the validate the form on the client side so processing will be fast than server-side validation. So, most of the web developers prefer javascript validation.It is important to validate the form submitted by the user because it can have inappropriate values. So validation is must.
Through javascript, we can validate name, password, email, date, mobile number etc fields.

Example of javascript form validation

In this example, we are going to validate the name and password. The name can’t be empty and password can’t be less than 6 characters long.
Here, we are validating the form on form submit. The user will not be forwarded to the next page until given values are correct.
  1. <script>  
  2. function validateform(){  
  3. var name=document.myform.name.value;  
  4. var password=document.myform.password.value;  
  5.   
  6. if (name==null || name==""){  
  7.   alert("Name can't be blank");  
  8.   return false;  
  9. }else if(password.length<6){  
  10.   alert("Password must be at least 6 characters long.");  
  11.   return false;  
  12.   }  
  13. }  
  14. </script>  
  15. <body>  
  16. <form name="myform" method="post" action="abc.jsp" onsubmit="return validateform()" >  
  17. Name: <input type="text" name="name"><br/>  
  18. Password: <input type="password" name="password"><br/>  
  19. <input type="submit" value="register">  
  20. </form>  

Output of the above example

Name: 
Password: 

Javascript email validation

We can validate the email by the help of javascript.
There are many criteria that need to be follow to validate the email id such as:
  • email id must contain the @ and . character
  • There must be at least one character before and after the @.
  • There must be at least two characters after . (dot).
Let's see the simple example to validate the email field.
  1. <script>  
  2. function validateemail()  
  3. {  
  4. var x=document.myform.email.value;  
  5. var atposition=x.indexOf("@");  
  6. var dotposition=x.lastIndexOf(".");  
  7. if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){  
  8.   alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"
  9. +dotposition);  
  10.   return false;  
  11.   }  
  12. }  
  13. </script>  
  14. <body>  
  15. <form name="myform"  method="post" action="abc.jsp" onsubmit="return validateemail();">  
  16. Email: <input type="text" name="email"><br/>  
  17.   
  18. <input type="submit" value="register">  
  19. </form>  

Output of the above example


Email: 
Posted by at No comments:
Labels:

Monday, 27 October 2014

JavaScript



JavaScript 

javascript
JavaScript is a object-based scripting language. It is lightweight and cross-platform programming language.
It is not compiled but translated. JavaScript Translator (embedded in browser) is responsible to translate the JavaScript code.

Where it is used?

It is used to create interactive websites. It is mainly used for:
  1. Client-side validation
  2. Dynamic drop-down menus
  3. Displaying data and time
  4. Displaying popup windows and dialog boxes (like alert dialog box, confirm dialog box and prompt dialog box)
  5. Displaying clocks etc.

Audience

We have developed this tutorial for beginners as well as experienced persons. There are given a lot of examples with point to point explanation.

Problem

If there is any problem related to JavaScript, you can post your question in forum. We will definitely sort out your problems.

Understanding HTML/DOM events for Javascript

  1. HTML/DOM Events
Javascript code is executed with events. So before learning javascript, let’s have some idea about events.
EventsDescription
onclickoccurs when element is clicked.
ondblclickoccurs when element is double-clicked.
onfocusoccurs when an element gets focus such as button, input, textarea etc.
onbluroccurs when form looses the focus from an element.
onsubmitoccurs when form is submitted.
onmouseoveroccurs when mouse is moved over an element.
onmouseoutoccurs when mouse is moved out from an element (after moved over).
onmousedownoccurs when mouse button is pressed over an element.
onmouseupoccurs when mouse is released from an element (after mouse is pressed).
onloadoccurs when document, object or frameset is loaded.
onunloadoccurs when body or frameset is unloaded.
onscrolloccurs when document is scrolled.
onresizedoccurs when document is resized.
onresetoccurs when form is reset.
onkeydownoccurs when key is being pressed.
onkeypressoccurs when user presses the key.
onkeyupoccurs when key is released.

Javascript Example

  1. Javascript Example
  2. Within body tag
  3. Within head tag
Javascript is easy to code. Javascript provides you 3 places to have the code: wihin body tag, within head tag and external javascript file.
Let’s create the first javascript example.
  1. <html>  
  2. <body>  
  3. <script type="text/javascript">  
  4. document.write("JavaScript is a simple language for javatpoint learners");  
  5. </script>  
  6. </body>  
  7. </html>  
The script tag specifies that we are using javascript.
The text/javascript is the content type that provides information to the browser about the data.
The document.write() function is used to display dynamic content through javascript. We will learn about document object in deail later.

3 Place to put javascript code

  1. Between the body tag of html
  2. Between the head tag of html/li>
  3. In .js file (external javascript)

1) Javascript code between the body tag of html

In the above example, we have displayed the dynamic content using javascript. Let’s see the simple example of javascript that displays alert dialog box.
  1. <html>  
  2. <body>  
  3. <script type="text/javascript">  
  4.  alert("Hello Javatpoint");  
  5. </script>  
  6. </body>  
  7. </html>  

2) Javascript code between the head tag of html

Let’s see the same example of displaying alert dialog box of javascript that is contained inside the head tag.
In this example, we are creating a function msg(). To create function in javascript, you need to write function with functionname as given below.
To call function, you need to work on event. Here we are using onclick event to call msg() function.
  1. <html>  
  2. <head>  
  3. <script type="text/javascript">  
  4. function msg(){  
  5.  alert("Hello Javatpoint");  
  6. }  
  7. </script>  
  8. </head>  
  9. <body>  
  10. <p>Welcome to Javascript</p>  
  11. <form>  
  12. <input type="button" value="click" onclick="msg()"/>  
  13. </form>  
  14. </body>  
  15. </html>  

  16. External JavaScript file

    1. External JavaScript example
    We can create the external JavaScript file and embed it in many html page. It provides code reusability because single JavaScript file can be used in several html pages
    message.js
    1. function msg(){  
    2.  alert("Hello Javatpoint");  
    3. }  
    index.html
    1. <html>  
    2. <head>  
    3. <script type="text/javascript" src="message.js"></script>  
    4. </head>  
    5. <body>  
    6. <p>Welcome to JavaScript</p>  
    7. <form>  
    8. <input type="button" value="click" onclick="msg()"/>  
    9. </form>  
    10. </body>  
    11. </html>  
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)