Contact Us WebFom validation using Java script

Contact Us WebFom validation using Java script

M

mmakonde

JF-Expert Member
Joined
Dec 26, 2009
Posts
965
Reaction score
69
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!
 
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);
    }
 
inajitumia wenyewe. Kama page ilikuwa contact.php, maanake inatuma kwa contact.php
 
<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>
 
Mkuu RedSilverDog,

Nimeandika code hiyo hapo juu ya html na js.

Nikibonyeza SUBMIT(calling function) hakuna chochote.
 
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;


}

}
 
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>
Click to expand...

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>
 
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!!!
 
<html>
<body>
<?php echo $_POST["name"];?> <br/>

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

</body>
</html>


hii ndiyo index2.php ambayo nimeitrander kwenye APACHE server(XAMPP)
 
mmakonde said:
<html>
<body>
<?php echo $_POST["name"];?> <br/>

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

</body>




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


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>
 
You must log in or register to reply here.

Similar Discussions

Our Community

Coming Soon

Regional Communities

Coming Soon
Back
Top Bottom
Menu
Forums
New posts
Log in
Register