Kundan Chaudhary: Java Script

Showing posts with label Java Script. Show all posts

Tuesday, 25 August 2015

Gender Validation (Radio Button) using Java Script

HTML File

  
   
  <div class="lbl">Gender : </div>
  <div class="ctrl">
       <input type="radio" name="msex" value="Male" /><span>Male</span>
       <input type="radio" name="fsex" value="Female" /><span>Female</span>
       <span id ="err_gender"></span>
  </div>

Java Script File

  
   
function sex_validation(msex, fsex)
{
    count = 0;

    if (msex.checked)
    {
        count++;
    }
    if (fsex.checked)
    {
        count++;
    }
    if (count == 0)
    {
        var msg = "please Select Male/Female";
        document.getElementById("err_gender").innerHTML = msg;
        msex.focus();
        return false;
    }
    else
    {
        alert('Form Succesfully Submitted');
        window.location.reload()
        return true;
    }
}

Email Address Validation (Contain char, @ symbol and dot '.') using Java Script

HTML File

  
   
  <div class="lbl">Email : </div>
  <div class="ctrl">
       <input type="text" name="mail" id="mail">
       <span id ="err_mail"></span>
  </div>

Java Script File

  
   
function mail_validation(mail)
{
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if (mail.value.match(mailformat))
    {
        document.getElementById("err_mail").innerHTML = "";
        return true;
    }
    else
    {
        var msg = "please enter valid mail addr. ...";
        document.getElementById("err_mail").innerHTML = msg;
        mail.focus();
        return false;
    }  
}

Mobile number Validation (Contain 10 digit only) using Java Script

HTML File

  
   
  <div class="lbl">Mobile No : </div>
  <div class="ctrl">
       <input type="number" name="con">
       <span id ="err_cn"></span>
  </div>

Java Script File

  
   
function con_validation(con)
{
 var numbers = /^([0-9]{10})$/;
    if (con.value.match(numbers))
    {
        document.getElementById("err_cn").innerHTML = "";
        return true;
    }
    else
    {
        var msg = "please enter valid Contact No. ...";
        document.getElementById("err_cn").innerHTML = msg;
        con.focus();
        return false;
    }   
}

Pin Code Validation (Contain 6 digit only) using Java Script

HTML File

  
   
  <div class="lbl">Pincode : </div>
  <div class="ctrl">
       <input type="number" name="pin">
       <span id ="err_pin"></span>
  </div>

Java Script File

  
   
function pin_validation(pin)
{                                                          
    var reg = /^([0-9]{6})$/;
        if (pin.value.match(reg))
        {
            document.getElementById("err_pin").innerHTML = "";
            return true;
        }
        else
        {
            var msg = "please enter valid Pincode...";
            document.getElementById("err_pin").innerHTML = msg;
            pin.focus();
            return false;
        }
}

Match Password Validation (Contain char, digit and special symbol with 8 to 20 lenghts) using Java Script

HTML File

  
   
  <div class="lbl">Password : </div>
  <div class="ctrl" style="float: left;">
       <input type="password" name="pwd">
       <span id ="err_pword"></span>
  </div>
            </br></br>
   <div class="lbl">Retype Password : </div>
   <div class="ctrl" style="float: left;">
        <input type="password" name="rpwd">
        <span id ="err_rpword"></span>
   </div>

Java Script File

  
   
function rpwd_validation(rpwd)
{
    var pwd = document.registration.pwd;
    if (pwd.value == rpwd.value)
        {
            document.getElementById("err_rpword").innerHTML = "";
            return true;
        }
        else
        {
            document.getElementById("err_rpword").innerHTML = "Password does not match...";
            rpwd.focus();
            return false;
        }
}

Password Validation (Contain char, digit and special symbol with 8 to 20 lenghts) using Java Script

HTML File

  
   
  <div class="lbl">Password : </div>
  <div class="ctrl" style="float: left;">
       <input type="password" name="pwd">
       <span id ="err_pword"></span>
  </div>

Java Script File

  
   
function pwd_validation(pwd)
{
        var reg = /^([A-z0-9!@#$%^&**-+/]{8,20})$/;
        if (pwd.value.match(reg))
        {
            document.getElementById("err_pword").innerHTML = "";
            return true;
        }
        else
        {
            document.getElementById("err_pword").innerHTML = "please enter valid Password...";  
            pwd.focus();
            return false;
        }
}

User Name Validation (Contain letters only) using Java Script

HTML File

  
   
  <div class="lbl">First Name:</div>
  <div class="ctrl" style="float: left;">
       <input type="text" name="fname">
       <span id ="err_fname"></span>
  </div>

Java Script File

  
   
function fname_validation(fid)
{
    var letters = /^[A-Za-z]+$/;
    if (fid.value.match(letters))
    {
        document.getElementById("err_fname").innerHTML = "";
        return true;
    }   
    else
    {
        document.getElementById("err_fname").innerHTML = "Enter char only";
        fid.focus();
        return false;
    }
    
}

Saturday, 22 August 2015

Form Validation using Java Script

HTML File

  
   
  <html>
    <head>
        <title>validation</title>
        <script src="validation.js" type="text/javascript"></script>
    </head>
    <body>
    <center><h2>Validation Form</h2></center>
    <form name="registration" action="#" method="GET" onSubmit="return chk_valid();">
        <div id="form1">
            <div class="lbl">First Name:</div>
            <div class="ctrl" style="float: left;">
                <input type="text" name="fname">
                <span id ="err_fname"></span>
            </div>
            </br></br>
            <div class="lbl">Last Name : </div>
            <div class="ctrl" style="float: left;">
                <input type="text" name="lname">
                <span id ="err_lname"></span>
            </div>
            </br></br>

            <div class="lbl">Password : </div>
            <div class="ctrl" style="float: left;">
                <input type="password" name="pwd">
                <span id ="err_pword"></span>
            </div>
            </br></br>
            <div class="lbl">Retype Password : </div>
            <div class="ctrl" style="float: left;">
                <input type="password" name="rpwd">
                <span id ="err_rpword"></span>
            </div>
            </br></br>
            <div class="lbl">Address : </div>
            <div class="ctrl">
                <textarea rows="4" cols="30" name="addr"></textarea>
                <span id ="err_addr"></span>
            </div>
            </br>
            <div class="lbl">Pincode : </div>
            <div class="ctrl">
                <input type="number" name="pin">
                <span id ="err_pin"></span>
            </div>
            </br>
            <div class="lbl">Contact No : </div>
            <div class="ctrl">
                <input type="text" name="con" id="cn">
                <span id ="err_cn"></span>
            </div>
            </br>
            <div class="lbl">Email : </div>
            <div class="ctrl">
                <input type="text" name="mail" id="mail">
                <span id ="err_mail"></span>
            </div>
            </br>
            <div class="lbl">Gender : </div>
            <div class="ctrl">
                <input type="radio" name="msex" value="Male" /><span>Male</span>
                <input type="radio" name="fsex" value="Female" /><span>Female</span>
                <span id ="err_gender"></span>
            </div>
            </br></br>
            <div class="ctrl" style="text-align: center">
                <input type="submit" name="submit" id="submit" value="Submit">
                <input type="reset" name="reset" id="reset" value="Cancel">
            </div>
        </div>
    </form>
</body>
</html>

Java Script File

  
   
function chk_valid()
{
    var fid = document.registration.fname;
    var lid = document.registration.lname;
    var pwd = document.registration.pwd;
    var rpwd = document.registration.rpwd;
    var addr = document.registration.addr;
    var pin = document.registration.pin;
    var con = document.registration.con;
    var mail = document.registration.mail;
    var msex = document.registration.msex;
    var fsex = document.registration.fsex;
    
    if(fname_validation(fid))
    {
        if(lname_validation(lid))
        {
            if(pwd_validation(pwd))
            {
                if(rpwd_validation(rpwd))
                {
                    if(addr_validation(addr))
                    {
                        if(pin_validation(pin))
                        {
                            if(con_validation(con))
                            {
                                if(mail_validation(mail))
                                {
                                    if(sex_validation(msex, fsex))
                                    {
                                        
                                    }
                                }
                            }
                            
                        }
                    }
                }
            }
        }
    }
    return false;
}

function fname_validation(fid)
{
    var letters = /^[A-Za-z]+$/;
    if (fid.value.match(letters))
    {
        document.getElementById("err_fname").innerHTML = "";
        return true;
    }   
    else
    {
        document.getElementById("err_fname").innerHTML = "Enter char only";
        fid.focus();
        return false;
    }
    
}
function lname_validation(lid)
{
    var letters = /^[A-Za-z]+$/;
    if (lid.value.match(letters))
    {
        document.getElementById("err_lname").innerHTML = "";
        return true;
    }   
    else
    {
        document.getElementById("err_lname").innerHTML = "Enter char only";
        lid.focus();
        return false;
    }  
}
function pwd_validation(pwd)
{
        var reg = /^([A-z0-9!@#$%^&**-+/]{8,20})$/;
        if (pwd.value.match(reg))
        {
            document.getElementById("err_pword").innerHTML = "";
            return true;
        }
        else
        {
            document.getElementById("err_pword").innerHTML = "please enter valid Password...";  
            pwd.focus();
            return false;
        }
}
function rpwd_validation(rpwd)
{
    var pwd = document.registration.pwd;
    if (pwd.value == rpwd.value)
        {
            document.getElementById("err_rpword").innerHTML = "";
            return true;
        }
        else
        {
            document.getElementById("err_rpword").innerHTML = "Password does not match...";
            rpwd.focus();
            return false;
        }
}
function addr_validation(addr)
{                                                          
    if (addr.value == "")
        {
            document.getElementById("err_addr").innerHTML = "plz enter address";
            addr.focus();
            return false;
        }
        else
        {
            document.getElementById("err_addr").innerHTML = "";
            return true;
        }
}
function pin_validation(pin)
{                                                          
    var reg = /^([0-9]{6})$/;
        if (pin.value.match(reg))
        {
            document.getElementById("err_pin").innerHTML = "";
            return true;
        }
        else
        {
            var msg = "please enter valid Pincode...";
            document.getElementById("err_pin").innerHTML = msg;
            pin.focus();
            return false;
        }
}
function con_validation(con)
{
 var numbers = /^([0-9]{10})$/;
    if (con.value.match(numbers))
    {
        document.getElementById("err_cn").innerHTML = "";
        return true;
    }
    else
    {
        var msg = "please enter valid Contact No. ...";
        document.getElementById("err_cn").innerHTML = msg;
        con.focus();
        return false;
    }   
}
function mail_validation(mail)
{
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if (mail.value.match(mailformat))
    {
        document.getElementById("err_mail").innerHTML = "";
        return true;
    }
    else
    {
        var msg = "please enter valid mail addr. ...";
        document.getElementById("err_mail").innerHTML = msg;
        mail.focus();
        return false;
    }  
}
function sex_validation(msex, fsex)
{
    count = 0;

    if (msex.checked)
    {
        count++;
    }
    if (fsex.checked)
    {
        count++;
    }
    if (count == 0)
    {
        var msg = "please Select Male/Female";
        document.getElementById("err_gender").innerHTML = msg;
        msex.focus();
        return false;
    }
    else
    {
        alert('Form Succesfully Submitted');
        window.location.reload()
        return true;
    }
}

Friday, 21 August 2015

Display Current time using Java Script


    <html>
    <head>
        <title>JavaScript in page</title>
    </head>
    <body bgcolor="#CBCBCB">
    <center>
        <h1>Welcome</h1>
        <p><h2>TODYA'S DATE IS:</h2></p>
    <script>
        document.write(Date());
    </script>
    </center>
    </body>
    </html>

Create Calculator using Java Script

  
   

<html>
  <body>
    <script>
      function sum() {
        var y = document.getElementById("txt1").value;
        var z = document.getElementById("txt2").value;
        var x = +y + +z;
        document.getElementById("demo").innerHTML = x;
      }
      function sub() {
        var y = document.getElementById("txt1").value;
        var z = document.getElementById("txt2").value;
        var x = +y - +z;
        document.getElementById("demo").innerHTML = x;
      }
      function div() {
        var y = document.getElementById("txt1").value;
        var z = document.getElementById("txt2").value;
        var x = +y / +z;
        document.getElementById("demo").innerHTML = x;
      }
      function mul() {
        var y = document.getElementById("txt1").value;
        var z = document.getElementById("txt2").value;
        var x = +y * +z;
        document.getElementById("demo").innerHTML = x;
      }
    </script>
    
    <br/>Enter first number:
    <input type="text" id="txt1" name="text1">Enter second number:
    <input type="text" id="txt2" name="text2">
    <br />
    <br />
    <button onclick="sum()">SUM</button>
    <button onclick="sub()">SUB</button>
    <button onclick="mul()">MUL</button>
    <button onclick="div()">DIV</button>
    <br/>
    <p id="demo"></p>
  </body>
</html>

Pages

Tuesday, 25 August 2015

Saturday, 22 August 2015

Friday, 21 August 2015