get value from object in JavaScript

-

How to get value from object in JavaScript?

How to validate email in JavaScript?


The form capture the following:
visitors name.
Email_Id
gender/sex
the visitors date of birth(dd/mm/yyyy)
text box to retrieve the users hobbies
submit/reset/abort button

Client side validation:
Name,email,sex,Dob con not be empty.
The email address can not contain any special character except '@' and '.'
the length of email and name field can not exceed 30 character
date of birth is keyed in  "dd/mm/yyyy" formats and validate day, month and year.
day is between 1 to 31, month is 1 to 12 and year is accept till 2020.




Html/JavaScript

<html>
    <head><script  language="Javascript">
        function verify()
        {
            let i;
            for(i=0;i<7;i++)
                {
                    if(document.forms[0].elements[i].value=="")
                        {
                            alert("Please fill in the "+document.forms[0].elements[i].name+" field");
                            document.forms[0].elements[i].focus();
                            return(false);
                        }
                    if(document.forms[0].elements[i].value!="")
                        {
                            pass=document.forms[0].elements[1].value.indexOf('@',0);
                            pass1=document.forms[0].elements[1].value.indexOf('.',0);
                            if(pass==-1 ||pass1==-1)
                            {
                                alert("Inavlid Email-id");
                                document.forms[0].elements[1].focus();
                                return(false);
                            }
                            
                        }
                   
                }
            return(true);
       }
        
        function checkDate()
        {
            year=document.forms[0].elements[6].value;
            if(year>2020)
                {
                    alert("Enter correct year(till 2020)");
                     document.forms[0].elements[6].focus();
                    return(false);
                }
            month=document.forms[0].elements[5].value;
            date=document.forms[0].elements[4].value;
            if(date>31|| date<1)
                {
                    alert("enter proper date");
                     document.forms[0].elements[4].value="";
                    document.forms[0].elements[4].focus();
                    return(false);
                }
            
            if(isNaN(month)!=true)
                {
                    if(month>12||month<1)
                         {
                     alert("enter proper month");
                              document.forms[0].elements[5].value="";
                    document.forms[0].elements[5].focus();
                    return(false);
                }
                    
                }
            else {
                     alert("enter month number");
                 document.forms[0].elements[5].value="";
                    document.forms[0].elements[5].focus();
                    return(false);
                }
            return(true);
               
        }
        function checkLength()
        {
            let i;
                for(i=0;i<1;i++)
                {
                val=document.forms[0].elements[i].value;
                len=val.length;
                    if(len>30)
                        {
                            alert("value Exceeds 30 character");
                              document.forms[0].elements[i].value="";
                                document.forms[0].elements[i].focus();
                                return(false); 
                        }
                    
                }
            
        }
        <!--this function takes user to the previous page-->
        function abort(form){
            history.back();
        }
        
        </script>
    </head>
    <BODY bgcolor="pink">
        <center><h1>My_Shop</h1>
            <hr>
        <form onSubmit="return verify()">
            <b>Please input your name</b><br>
            <input type="text" Name="name" size="40"  onBlur="checkLength();"/><br>
             <b>Please input your Email-id</b><br>
            <input type="text" Name="emailid" size="40" onBlur="checkLength();" /><br>
            <b>Pleas input your Sex/Gender</b><br>
            <input type="radio" Name="gender" value="male" checked>Male
            <input type="radio" Name="gender" value="femail">Femail<br>
            <b>Please input your date of birth</b><br>
            <input type="text" Name="day" size="3" > <input type="text" Name="month" size="3">  <input type="text" Name="year" size="5"><br>
            <p>Tell us about your hobbies and interests in the'text-box' bellow</p>
            <textarea Name="request" rows="8" cols="65" onfocus="checkDate()"></textarea>
            <p>Can we contact you with information about our product or services<br>
            <input type="radio" Name="moreInfo" vlaue="y"><span style="color:blue">Yes</span>
             <input type="radio" Name="moreInfo" vlaue="n" checked="true"><span style="color:red">No, thanks!</span>
            </p>
            <p><center> <input type="Submit" value="Submit" Name="Submit"/>
                <input type="Reset" value="Reset" Name="Reset"/>
                <input type="Button" value="Abort" Name="At" onClick="abort(this.form)" />
                </center>
            </p>
            
                 
            
            </form>
            <hr>
            <p><b>Thank for Shopping by our webSite</b></p>
        </center>
    </BODY>

</html>

JavaScript code contain four function
1.verify():- The  function verify() checks whether appropriate intervention is all the form elements. if element is empty  an alert box is displayed to informing the user to fill the blank field and also search the email for '@' and a '.' symbol.

2.checkDate():-The function checkDate() verify the day between(1-31) and month(1-12) and year(till 2020).
3.checkLenght():-The function checkLen() check the lenght of name and email.
4.abort():- The function take user previous page.


thank you




Comments

Post a Comment

Popular posts from this blog

python pattern programming

-
Image
PYTHON PATTERN PROGRAMMING Python nested loop: Python allow programmer to use nested loops.Nested loop means when one loop is define into another loop is known as nested loop,in which one is called inner loop and another is called outer loop.In which when outer loop's condition is true than inner loop will be execute. we use the concept of nested loop in pattern programming etc. syntax: while (condition):      while (condition):         statement x     statement y   Some examples of nested loop. Nested loop program. Q. write  a program to print following pattern. P P Y P Y T P Y T H P Y T H O P Y T H O N str = "PYTHON" for  i  in   range ( 0 , 6 ):      print ()      for  j  in   range ( 0 ,i+ 1 ):          print (str[j],  end = ' ' ) Q. write  a program to print following pattern. *  * *  * * *  * * * *  * * * * * for  i  in   range ( 1 , 6 ):          print ()          for
Read more

Decision making statement in python

-
Image
Decision making statement in python In this statement we can take a decision for executing block of statement.if in this case condition is checked.if condition is true then the true part will execute,otherwise false part will execute.        There are four types of decision making statement. (1) simple if statement/single alternative if statement. (2) if-else statement/double alternative if statement. (3) if-else-if statement/else if ladder statement. (4) Nested if statement/compound if statement. (1)simple if statement/single alternative if statement  In this statement if condition is true then true part will execute otherwise no action will generate.  Syntax: if  test expression:     Statement 1     Statement 2     Statement 3    ---------------    ---------------     Statement n Statement x Examples: if  ( age>=18) :    print( "You are eligible for vote" ) (2) if-else statement/double alternative if statement In this statement if co
Read more

javaScript Calculator.

-
Image
javaScript Calculator. calculator using HTML,CSS and javaScrip t. Html code- <html>     <head>         <meta charset="utf-8">         <meta name="viewport" content="width=device-width, initial-scale=1.0">         <link rel="stylesheet" type="text/css" href="style_calculater.css">         <script src="script_src.js">     </head>     <body>     <div class="container">         <div class="dbox"><input type="text" id="display" placeholder="0"><br>         <input type="text" id="display2" placeholder="0">         <div id="box">             <button class="key" value="7" onclick="dis('7')" > 7 </button>              <button class="key" value="8" onclic
Read more