We are providing online training of realtime Live project on Asp.Net MVC with Angular and Web API. For more information click here. If you have any query then drop the messase in CONTACT FORM

Monday, July 13, 2015

Create a Registration form with validation of javascript

<html>
 <head >
    <title>Registration Page</title>
    <script type="text/javascript">
        function Submit() {
            var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
            var fname = document.form.Name.value,
             lname = document.form.LastName.value,
             femail = document.form.Email.value,
             freemail = document.form.enterEmail.value,
             fpassword = document.form.Password.value,
             fmonth = document.form.birthday_month.value,
             fday = document.form.birthday_day.value,
             fyear = document.form.birthday_year.value;
            if (fname == "") {
                document.form.Name.focus();
                document.getElementById("errorBox").innerHTML = "Enter the first name";
                return false;
            }
            if (lname == "") {
                document.form.LastName.focus();
                document.getElementById("errorBox").innerHTML = "Enter the last name";
                return false;
            }

            if (femail == "") {
                document.form.Email.focus();
                document.getElementById("errorBox").innerHTML = "Enter the email";
                return false;

            } else if (!emailRegex.test(femail)) {
                document.form.Email.focus();
                document.getElementById("errorBox").innerHTML = "Enter the valid email";
                return false;
            }
            if (freemail == "") {
                document.form.enterEmail.focus();
                document.getElementById("errorBox").innerHTML = "Re-enter the email";
                return false;

            } else if (!emailRegex.test(freemail)) {
                document.form.enterEmail.focus();
                document.getElementById("errorBox").innerHTML = "Re-enter the valid email";
                return false;
            }

            if (freemail != femail) {
                document.form.enterEmail.focus();
                document.getElementById("errorBox").innerHTML = "Emails are not matching, re-enter again";
                return false;
            }
            if (fpassword == "") {
                document.form.Password.focus();
                document.getElementById("errorBox").innerHTML = "enter the password";
                return false;
            }
            if (fmonth == "") {
                document.form.birthday_month.focus();
                document.getElementById("errorBox").innerHTML = "select the birthday month";
                return false;
            }
            if (fday == "") {
                document.form.birthday_day.focus();
                document.getElementById("errorBox").innerHTML = "select the birthday day";
                return false;
            }
            if (fyear == "") {
                document.form.birthday_year.focus();
                document.getElementById("errorBox").innerHTML = "Select the birthday year";
                return false;

            }

            if (document.form.radiobutton[0].checked == false && document.form.radiobutton[1].checked == false) {
                document.getElementById("errorBox").innerHTML = "Select your gender";
                return false;
            }
            if (fname != '' && lname != '' && femail != '' && freemail != '' && fpassword != '' && fmonth != '' && fday != '' && fyear != '') {
                document.getElementById("errorBox").innerHTML = "form submitted successfully";
            }
        }
       
    </script>
    <style>

        * {
            margin: 0px;
            padding: 0px;
        }
        body {
            font-family: Tahoma, Geneva, sans-serif;
        }

        #container {
            width: 550px;
            background-color: rgba(250,250,252,.9);
            margin: auto;
            margin-top: 10px;
            margin-bottom: 10px;
            box-shadow: 0 0 3px #999;         

        }

        #container_body {
            padding: 20px;
             border-color:green;
            border-width:4px;
        }

        .form_title {
            font-size: 35px;
            color: green;
            font-weight:bold;
            text-align: center;
            padding: 10px;
        }
        .head_para {
            font-size: 19px;
            color: #99a2a7;
            text-align: center;
            font-weight: normal;
        }
        #form_name {
            padding: 25px 0 0 15px;
        }

        .firstnameorlastname {
            margin-right: 20px;

        }

        .input_name {
            width: 207px;
            padding: 5px;
            font-size: 18px;
        }

        #email_form {
            clear: both;
            padding: 15px 0 10px 0px;
        }

        .input_email {
            width: 434px;
            padding: 5px;
            font-size: 18px;
        }

        #Re_email_form {
            padding: 10px 0 10px 0px;
        }
        .input_Re_email {
            width: 434px;
            padding: 5px;
            font-size: 18px;
        }
        #password_form {
            padding: 10px 0 10px 0px;
        }

        .input_password {
            width: 434px;
             padding: 5px;
            font-size: 18px;
        }


        .birthday_title {
            font-size: 16px;
            color: #8b919d;
            font-weight: normal;
            padding: 0 0 10px 0;
        }

        select {
            padding: 5px;
        }


        #birthday {
            font-size: 12px;
            color: #8b919d;
            padding-top: 10px;
        }

        #radio_button {
            padding: 10px 0 0 0;
        }
        #sign_user {
            font-size: 14px;
            color: #FFF;
            text-align: center;
            background-color: #3B5998;
            padding: 10px;
            margin-top: 10px;
            cursor: pointer;
        }

        #errorBox {
            color: #F00;
        }
    </style>
</head>
<body>   

            <div id="container">
                <div id="container_body">
                    <div style="border:double">
                        <h2 class="form_title">Welcome User Registration Form </h2>
                        <p class="head_para">Form Validated Using Javascript</p>
                    </div>

                    <div id="form_name">
                        <div class="firstnameorlastname">
                            <form name="form">
                                 <div id="errorBox"></div>
                                <input type="text" name="Name" value="" placeholder="First Name" class="input_name">
                                <input type="text" name="LastName" value="" placeholder="Last Name" class="input_name">
                        </div>
                        <div id="email_form">
                            <input type="text" name="Email" value="" placeholder="Your Email" class="input_email">

                        </div>
                        <div id="Re_email_form">
                            <input type="text" name="enterEmail" value="" placeholder="Re-enter Email" class="input_Re_email">

                        </div>
                        <div id="password_form">
                            <input type="password" name="Password" value="" placeholder="New Password" class="input_password">

                        </div>

                        <!--birthday details start-->

                        <div>
                            <h3 class="birthday_title">Birthday</h3>
                        </div>
                        <div>
                               <select name="birthday_month">
                                <option value="" selected>Month</option>
                                <option value="1">Jan</option>
                                <option value="2">Feb</option>
                                <option value="3">Mar</option>
                                <option value="4">Apr</option>
                                <option value="5">May</option>
                                   <option value="5">Jun</option>
                                   <option value="5">july</option>
                                   <option value="5">Aug</option>
                                   <option value="5">Sept</option>
                                   <option value="5">Oct</option>
                                   <option value="5">Nov</option>
                                   <option value="5">Dec</option>
                            </select>
                            &nbsp;&nbsp;

        <select name="birthday_day">
            <option value="" selected>Day</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
             <option value="10">10</option>
            <option value="11">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
        </select>
                            &nbsp;&nbsp;
        <select name="birthday_year">
            <option value="" selected>Year</option>
            <option value="2013">2013</option>
            <option value="2012">2012</option>
            <option value="2011">2011</option>
            <option value="2010">2010</option>
            <option value="2009">2009</option>
              <option value="2009">2008</option>
              <option value="2009">2007</option>
              <option value="2009">2006</option>
              <option value="2009">2005</option>
              <option value="2009">2004</option>
              <option value="2009">2003</option>
              <option value="2009">2002</option>
              <option value="2009">2001</option>
        </select>
                        </div>                     

                        <div id="radio_button">
                            <input type="radio" name="radiobutton" value="Female">
                            <label>Female</label>
                            &nbsp;&nbsp;&nbsp;
        <input type="radio" name="radiobutton" value="Male">
                            <label>Male</label>
                        </div>
                        <div align="center">
                            <input type="button" id="sign_user" onclick="Submit()" value="Submit" />

                        </div>


Output:

No comments: