Contact Us WebFom validation using Java script

mmakonde · May 14, 2011

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!

redSilverDog · May 14, 2011

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);
    }

mmakonde · May 14, 2011

action "#" nifafanulie maana yake!

redSilverDog · May 14, 2011

inajitumia wenyewe. Kama page ilikuwa contact.php, maanake inatuma kwa contact.php

mmakonde · May 15, 2011

<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>

mmakonde · May 15, 2011

Mkuu RedSilverDog,

Nimeandika code hiyo hapo juu ya html na js.

Nikibonyeza SUBMIT(calling function) hakuna chochote.

mmakonde · May 15, 2011

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;

}

}

redSilverDog · May 15, 2011

mmakonde said:
<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>

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>

mmakonde · May 15, 2011

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!!!

redSilverDog · May 15, 2011

hebu unavyo grab hizo variables, naomba hio source code.

mmakonde · May 15, 2011

<html>
<body>
<?php echo $_POST["name"];?> <br/>

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

</body>
</html>

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

Mtazamaji · May 15, 2011

Mi bado sijampata mmakonde ni code gani ipo client side amabayo hasa ndo user ana interface nayo, na code gani ipo server side ambayo inaprcess request za cliet na kurudisha feedback

BTN.

Nakushauri kwa learning chukua au tafuta Demo zilizotengenzwa tayari na zifanyie customisation. Mfano wa Some sample demo, maelezo na code zake nimegogle ni hii

http://web-kreation.com/all/lightform-free-ajaxphp-contact-form/

Submit A Form Without Page Refresh using jQuery | Nettuts+

redSilverDog · May 16, 2011

js zinakuwa client side na php ni server side..

redSilverDog · May 16, 2011

mmakonde said:
<html>
<body>
<?php echo $_POST["name"];?> <br/>

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

</body>

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

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>

Contact Us WebFom validation using Java script

mmakonde

JF-Expert Member

redSilverDog

JF-Expert Member

mmakonde

JF-Expert Member

redSilverDog

JF-Expert Member

mmakonde

JF-Expert Member

mmakonde

JF-Expert Member

mmakonde

JF-Expert Member

redSilverDog

JF-Expert Member

mmakonde

JF-Expert Member

redSilverDog

JF-Expert Member

mmakonde

JF-Expert Member

Mtazamaji

JF-Expert Member

redSilverDog

JF-Expert Member

redSilverDog

JF-Expert Member

Similar Discussions