Dismiss Notice
You are browsing this site as a guest. It takes 2 minutes to CREATE AN ACCOUNT and less than 1 minute to LOGIN

Contact Us WebFom validation using Java script

Discussion in 'Tech, Gadgets & Science Forum' started by mmakonde, May 14, 2011.

  1. m

    mmakonde JF-Expert Member

    #1
    May 14, 2011
    Joined: Dec 26, 2009
    Messages: 967
    Likes Received: 4
    Trophy Points: 0
    Nimeandika html form yenye Name,Email and iquiry(textarea)
    sasa nataka ku validate form hiyo kutumia Javascript .

    Najaribu without success.Then nikiweza nitumia tena php kuvalidate

    Share your expertise!
     
  2. redSilverDog

    redSilverDog JF-Expert Member

    #2
    May 14, 2011
    Joined: Sep 18, 2010
    Messages: 486
    Likes Received: 3
    Trophy Points: 0
    Jaribu hii iko simple.

    HTML:
    <html>
        <body>
           <div class="formDiv">
           <h3> Please post your comment here </h3>
           
            <form method="post" action="#" onSubmit="return validate();" >
            <dl>
                <dt>Name: </dt>     <dd><input type="text" name="name" id="name"/></dd>
                <dt>Email: </dt>     <dd><input type="text" name="email" id="email" /></dd>
                <dt>Comment: </dt>     <dd><textarea name="comment" id="comment" cols="30" rows="4"></textarea></dd>
                <dt></dt>             <dd><input type="submit" value="Submit" name="submit"/></dd>
            </form>
            </dl>
            </div>
        </body>
    </html>
    
    Code:
    function validate(){
       var nameObj = document.getElementById('name');
       var emailObj = document.getElementById('email');
       var commentObj = document.getElementById('comment');
       
       if (isEmpty(nameObj) == true){
       alert("Please fill the required fields");
       nameObj.style.border = '1px solid red';
       return false;
       }
          if (isEmpty(emailObj) == true){
       alert("Please fill the required fields");
       emailObj.style.border = '1px solid red';
       return false;
       }
          if (isEmpty(commentObj) == true){
       alert("Please fill the required fields");
       commentObj.style.border = '1px solid red';
       return false;
       }
       
       if (isValid(emailObj)==false){
           alert("Please insert valid email");
           emailObj.style.border = '1px solid red';
           emailObj.focus();
           return false;
       }
       
       return true;
    }
    
        function isEmpty(elem){
           if (elem.value == null || elem.value == ""){
           return true;
           }
           return false;
        }
    
        
        function isValid(elem){
     var re = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
         return re.test(elem.value);
        }
     
  3. m

    mmakonde JF-Expert Member

    #3
    May 14, 2011
    Joined: Dec 26, 2009
    Messages: 967
    Likes Received: 4
    Trophy Points: 0
    action "#" nifafanulie maana yake!
     
  4. redSilverDog

    redSilverDog JF-Expert Member

    #4
    May 14, 2011
    Joined: Sep 18, 2010
    Messages: 486
    Likes Received: 3
    Trophy Points: 0
    inajitumia wenyewe. Kama page ilikuwa contact.php, maanake inatuma kwa contact.php
     
  5. m

    mmakonde JF-Expert Member

    #5
    May 15, 2011
    Joined: Dec 26, 2009
    Messages: 967
    Likes Received: 4
    Trophy Points: 0
    <html>
    <head> <title> Contactus</title>
    <script type="text/javascript"src="validateform.js">
    function validateForm()
    { if (document.contactus.name.value=="")||
    document.contactus.email.value==""||
    document.contactus.inquiry.value=="")
    { alert("Please fill out all fields before sending form");
    return false; }
    }
    </script>
    </head>
    <body>

    <form name="contactus" method="post" action="tester.html" OnSubmit="return validateform()">
    Name <br/> <input type="text" name ="username"/><br/>
    Email<br/> <input type="text" name ="email"/><br/>
    Inquiry<br/> <textarea name= "inquiry" rows ="7" cols ="60"></textarea> <br/>
    <input type="submit" value = "Send Your Inquiry">
    </form>

    </body>
    </html>
     
  6. m

    mmakonde JF-Expert Member

    #6
    May 15, 2011
    Joined: Dec 26, 2009
    Messages: 967
    Likes Received: 4
    Trophy Points: 0
    Mkuu RedSilverDog,

    Nimeandika code hiyo hapo juu ya html na js.

    Nikibonyeza SUBMIT(calling function) hakuna chochote.
     
  7. m

    mmakonde JF-Expert Member

    #7
    May 15, 2011
    Joined: Dec 26, 2009
    Messages: 967
    Likes Received: 4
    Trophy Points: 0
    validateform.js

    function validateform()
    {
    if (document.contactus.name.value=="")||
    document.contactus.email.value==""||
    document.contactus.inquiry.value=="")
    {

    alert("Please fill out all fields before sending form");
    return false;


    }

    }
     
  8. redSilverDog

    redSilverDog JF-Expert Member

    #8
    May 15, 2011
    Joined: Sep 18, 2010
    Messages: 486
    Likes Received: 3
    Trophy Points: 0
    Kwanza javaScript ni case sensitive.
    Angali paranthesis kama ziko sawa.

    Therefore solution:

    Code:
    <html>
    <head> <title> Contactus</title>
    <script type="text/javascript">
    function validateForm(){
         if (document.contactus.name.value=="" ||document.contactus.email.value=="" ||document.contactus.inquiry.value==""){
              alert("Please fill out all fields before sending form");
             return false;
     }else{
     return true;
     }
    }
    </script>
    </head>
    <body>
    
    <form name="contactus" method="post" action="tester.html" OnSubmit="return validateForm()">
    Name <br/> <input type="text" name ="username"/><br/>
    Email<br/> <input type="text" name ="email"/><br/>
    Inquiry<br/> <textarea name= "inquiry" rows ="7" cols ="60"></textarea> <br/>
    <input type="submit" value = "Send Your Inquiry">
    </form>
    
    </body>
    </html>
    
     
  9. m

    mmakonde JF-Expert Member

    #9
    May 15, 2011
    Joined: Dec 26, 2009
    Messages: 967
    Likes Received: 4
    Trophy Points: 0
    Mzee Tungule thx,
    sasa nataka ku-combine form validation na php .ili niangalie name/email kwenye server.Natumia APACHE.

    Nlichofanya,nimeipa call action="index2.php" kwenye html code!


    Nikafungua file hilo php file na kulipaste kwenye XAMP(tranfer)


    Ajabu nikisubmit,(after field zote kuwa filled),screeni empty!


    NB : I am self learner!!!
     
  10. redSilverDog

    redSilverDog JF-Expert Member

    #10
    May 15, 2011
    Joined: Sep 18, 2010
    Messages: 486
    Likes Received: 3
    Trophy Points: 0
    hebu unavyo grab hizo variables, naomba hio source code.
     
  11. m

    mmakonde JF-Expert Member

    #11
    May 15, 2011
    Joined: Dec 26, 2009
    Messages: 967
    Likes Received: 4
    Trophy Points: 0
    <html>
    <body>
    <?php echo $_POST["name"];?> <br/>

    <?php echo $_POST["emai"];?>

    </body>
    </html>


    hii ndiyo index2.php ambayo nimeitrander kwenye APACHE server(XAMPP)
     
  12. Mtazamaji

    Mtazamaji JF-Expert Member

    #12
    May 15, 2011
    Joined: Feb 29, 2008
    Messages: 5,972
    Likes Received: 27
    Trophy Points: 0
  13. redSilverDog

    redSilverDog JF-Expert Member

    #13
    May 16, 2011
    Joined: Sep 18, 2010
    Messages: 486
    Likes Received: 3
    Trophy Points: 0
    js zinakuwa client side na php ni server side..
     
  14. redSilverDog

    redSilverDog JF-Expert Member

    #14
    May 16, 2011
    Joined: Sep 18, 2010
    Messages: 486
    Likes Received: 3
    Trophy Points: 0

    Lazima ifanane na value ya name property ya hio imput tag. so solution:

    Code:
    <html>
    <body>
    <?php echo $_POST['username'];?> <br/>
    
    <?php echo $_POST['email'];?>
    
    </body>
    </html>
     
Loading...