*******************
my sql connect using oop
*********************

config.php
--------------------
<?php
class Myclass
{
public $con;

public function __construct()
{
$this->con=new Mysqli('localhost','root','','test');
if($this->con->connect_error)
{
die("error:".$this->con->connect_error);
}
}
public function query($sql){
return $this->con->query($sql);
}
}


index.php
------------------
<?php
include('include/config.php');
include('include/header.php');
?>
<div class="col-12 pt-5">
<h2>Student Information</h2>
<?php

$myclass=new Myclass;
$sql="SELECT * FROM student";
$result=$myclass->query($sql);
?>
<table class="table">

<tr>
<th>Roll</th>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Action</th>
</tr>
<?php
while($data=$result->fetch_object()){?>
<tr>
<td><?php echo $data->roll ?></td>
<td><?php echo $data->name ?></td>
<td><?php echo $data->gender ?></td>
<td><?php echo $data->age ?></td>
<td>
<a class="btn btn-info btn-sm" href="#">Edit</a>
<a class="btn btn-danger btn-sm" href="#">Delete</a>
</td>
</tr>
<?php } ?>

</table>

<?php include('include/footer.php');?>




*******************
my sql connect using oop
*********************

<?php
class Myclass{
public $con;

public function __construct(){
$this->con=new Mysqli('localhost','root','','test');
if($this->con->connect_error){
die("error:".$this->con->connect_error);
}
}
}

$myclass=new Myclass;
$sql="SELECT * FROM student";
$result=$myclass->con->query($sql);
echo "<pre>";
while($data=$result->fetch_object())
{
var_dump($data);
}

*******************
my sql connect using oop
*********************
<?php
class Myclass{
public $con;

public function __construct(){
$this->con=new Mysqli('localhost','root','','test');
if($this->con->connect_error){
die("error:".$this->con->connect_error);
}
}
public function query($sql){
return $this->con->query($sql);
}
}

$myclass=new Myclass;
$sql="SELECT * FROM student";
$result=$myclass->query($sql);
echo "<pre>";
while($data=$result->fetch_object())
{
echo "<pre>";
var_dump($data->roll);
var_dump($data->name);
var_dump($data->gender);
var_dump($data->age);
}

****************
Magic Methods
*****************

<?php
/*
__get($property)
__set($property,$value)
__call($method,$arg_array)
*/

//using __get($property)

class student{ //create class

public $name;  //create property

public function describe(){  //create method
echo "I'm a student.<br />";
}

public function __get($pm){

echo "$pm does not exit.<br />";
}

}

$st=new student();
$st->describe();
$st->Karim;

$st->describe();

?>

**************
Magic Methods
***************
<?php
/*
__get($property)
__set($property,$value)
__call($method,$arg_array)
*/

//__set($property,$value)

class student{ //create class

public $name;  //create property

public function describe(){  //create method
echo "I'm a student.<br />";
}

public function __get($pm){

echo "$pm does not exit.<br />";
}
public function __set($pm,$value){
echo "We set $pm->$value";

}
}

$st=new student();
$st->describe();
$st->Karim;

$st->describe();

$st->age=58; //un define proprety te value assign korlam

?>

**************
Magic Methods
***************
<?php
/*
__get($property)
__set($property,$value)
__call($method,$arg_array)
*/

//__call($method,$arg_array)

class student{ //create class

public $name;  //create property

public function describe(){  //create method
echo "I'm a student.<br />";
}

public function __get($pm){

echo "$pm does not exit.<br />";
}

public function __set($pm,$value){
echo "We set $pm->$value.<br />";
}

public function __call($pm,$value){
echo 'There is no '.$pm. ' method and Arguments= '. implode(',',$value) ;

}
}

$st=new student();
$st->describe();
$st->Karim;

$st->describe();

$st->age=58; //un define proprety te value assign korlam
$st->notExistMethod('2','8','5');
?>



***************
abstract class
***************

<?php

abstract class Student{    //abstract class
public $name;      //property

public $age;   //property

public function details(){  //Non abstruct method
echo $this->name." is ".$this->age." years old.<br />";
}

abstract public function School();  //abstruct method
}
class boy extends Student{  //create sub class

public function describe(){  //new method Call from sub class
return parent::details()."and I am a high school student.<br />";
}

public function School(){  //Over write abstract method

return "I like to read story book.";
}
}
$s=new boy();
$s->name="Karim";
$s->age="55";
echo $s->describe();
echo $s->School();
/*NB: abstract class er sora sori object toiry kora zay na
sub class kore object toiry korte hoy.
abstract class er modhey abstract method ebong non abstract
method thakte pare.
*/
?>

**********
Interface
**********

<?php
interface School{

public function mySchool();
}

interface College{

public function myCollege();
}

interface Virsity{

public function myVirsity();
}

class teacher implements School,College,Virsity{
public function __construct(){

$this->mySchool();
$this->myCollege();
$this->myVirsity();
}

public function mySchool(){

echo "I'm a school teacher.<br />";
}
public function myCollege(){

echo "I'm a college teacher.<br />";
}
public function myVirsity(){

echo "I'm a versity teacher.<br />";
}
}
class Student implements School,College,Virsity{
public function __construct(){

$this->mySchool();
$this->myCollege();
$this->myVirsity();
}

public function mySchool(){

echo "I'm a school student.<br />";
}
public function myCollege(){

echo "I'm a college student.<br />";
}
public function myVirsity(){

echo "I'm a versity student.";
}
}
$a=new Teacher();
$b=new Student();

?>

*************
Constructor
*************
<?php

class person{
public $name;
public $age;

public function __construct($a, $b){
$this->name=$a;
$this->age=$b;
}
public function personDetails(){

echo "<br />person name is= {$this->name} <br />and person age is= {$this->age}  ";
}
}
$personOne=new person("Md. Abdul Karim ","55");
$personOne->personDetails();
?>


*******************
Calculation using OOP
*********************
function.php
-------------------
<?php
class Calculation{

function add($a,$b){

echo "Sumassion is= ".($a+$b)."<br />";
}
function sub($a,$b){

echo "Subtraction is= ".($a-$b)."<br />";
}
function mul($a,$b){

echo "Multiplication is= ".($a*$b)."<br />";
}
function div($a,$b){

echo "Division is= ".($a/$b);
}
}

?>
index.php
--------------------
<?php include('function.php');?>
<!---------------------------------------------------------------------------------------------->


<form action="" method="POST">
<table>
<tr>
<td>Enter the first number=</td>
<td><input type="number"name="num1"/></td>
</tr>

<tr>
<td>Enter the second number=</td>
<td><input type="number"name="num2"/></td>
</tr>

<tr>
<td></td>
<td><input type="submit" name="calculation"value="Calculate"/></td>
</tr>
</table>


</form>
<?php
if(isset($_POST['calculation'])){

$numOne=$_POST['num1'];
$numTwo=$_POST['num2'];
if(empty($numOne) or empty($numTwo)){
echo "<span style='color:#EE6554;'>Field must not be empty!!</span>"."<br />";

}else{
echo "first number is= ".$numOne.",  "." "."Second number is= ".$numTwo."<br />";
$cal=new Calculation;
$cal->add($numOne,$numTwo);
$cal->sub($numOne,$numTwo);
$cal->mul($numOne,$numTwo);
$cal->div($numOne,$numTwo);
}
}
?>
**************
CRUD
**************
css/bootstrap.min.css
-----------------------

js/bootstrap.min.js
-------------------------

config.php
----------------------
<?php
/*
// mysql_connect("database-host", "username", "password")
$conn = mysql_connect("localhost","root","root")
            or die("cannot connected");

// mysql_select_db("database-name", "connection-link-identifier")
@mysql_select_db("test",$conn);
*/

/**
 * mysql_connect is deprecated
 * using mysqli_connect instead
 */

$databaseHost = 'localhost';
$databaseName = 'firozshah';
$databaseUsername = 'root';
$databasePassword = '';

$mysqli = mysqli_connect($databaseHost, $databaseUsername, $databasePassword, $databaseName);
?>

add.html
---------------
<html>
<head>
    <title>Add Data</title>
</head>

<body>
    <a href="index.php">Home</a>
    <br/><br/>

    <form action="add.php" method="post" name="form1">
        <table width="25%" border="0">
            <tr>
                <td>Name</td>
                <td><input type="text" name="name"></td>
            </tr>
            <tr>
                <td>Address</td>
                <td><input type="text" name="address"></td>
            </tr>
            <tr>
                <td>Phone/Email</td>
                <td><input type="text" name="email"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" name="Submit" value="Add"></td>
            </tr>
        </table>
    </form>
</body>
</html>

add.php
-------------
<html>
<head>
    <title>Add Data</title>
</head>

<body>
<?php
//including the database connection file
include_once("config.php");

if(isset($_POST['Submit'])) { 
    $name = $_POST['name'];
    $address = $_POST['address'];
    $email = $_POST['email'];
     
    // checking empty fields
    if(empty($name) || empty($address) || empty($email)) {             
        if(empty($name)) {
            echo "<font color='red'>Name field is empty.</font><br/>";
        }
     
        if(empty($address)) {
            echo "<font color='red'>Address field is empty.</font><br/>";
        }
     
        if(empty($email)) {
            echo "<font color='red'>Email field is empty.</font><br/>";
        }
     
        //link to the previous page
        echo "<br/><a href='javascript:self.history.back();'>Go Back</a>";
    } else {
        // if all the fields are filled (not empty)           
        //insert data to database
        $result = mysqli_query($mysqli, "INSERT INTO contact(name,address,email) VALUES('$name','$address','$email')");
     
        //display success message
        echo "<font color='green'>Data added successfully.";
        echo "<br/><a href='index.php'>View Result</a>";
    }
}
?>
</body>
</html>

delete.php
-----------------
//including the database connection file
<?php include("config.php");

//getting id of the data from url
$id = $_GET['id'];

//deleting the row from table
$result = mysqli_query($mysqli, "DELETE FROM contact WHERE id=$id");

//redirecting to the display page (index.php in our case)
header("Location:index.php");

//including the database connection file
include("config.php");

//getting id of the data from url
$id = $_GET['id'];

//deleting the row from table
$result = mysqli_query($mysqli, "DELETE FROM contact WHERE id=$id");

//redirecting to the display page (index.php in our case)
header("Location:index.php");?>

edit.php
----------------------

<?php
// including the database connection file
include_once("config.php");

if(isset($_POST['update']))
{ 
    $id = $_POST['id'];
 
    $name=$_POST['name'];
    $address=$_POST['address'];
    $email=$_POST['email']; 
 
    // checking empty fields
    if(empty($name) || empty($address) || empty($email)) {         
        if(empty($name)) {
            echo "<font color='red'>Name field is empty.</font><br/>";
        }
     
        if(empty($address)) {
            echo "<font color='red'>Address field is empty.</font><br/>";
        }
     
        if(empty($email)) {
            echo "<font color='red'>Email field is empty.</font><br/>";
        }     
    } else { 
        //updating the table
        $result = mysqli_query($mysqli, "UPDATE contact SET name='$name',address='$address',email='$email' WHERE id=$id");
     
        //redirectig to the display page. In our case, it is index.php
        header("Location: index.php");
    }
}
?>
<?php
//getting id from url
$id = $_GET['id'];

//selecting data associated with this particular id
$result = mysqli_query($mysqli, "SELECT * FROM contact WHERE id=$id");

while($res = mysqli_fetch_array($result))
{
    $name = $res['name'];
    $address = $res['address'];
    $email = $res['email'];
}
?>
<html>
<head> 
    <title>Edit Data</title>
</head>

<body>
    <a href="index.php">Home</a>
    <br/><br/>
 
    <form name="form1" method="post" action="edit.php">
        <table border="0">
            <tr>
                <td>Name</td>
                <td><input type="text" name="name" value="<?php echo $name;?>"></td>
            </tr>
            <tr>
                <td>Address</td>
                <td><input type="text" name="address" value="<?php echo $address;?>"></td>
            </tr>
            <tr>
                <td>Phone/Email</td>
                <td><input type="text" name="email" value="<?php echo $email;?>"></td>
            </tr>
            <tr>
                <td><input type="hidden" name="id" value=<?php echo $_GET['id'];?>></td>
                <td><input type="submit" name="update" value="Update"></td>
            </tr>
        </table>
    </form>
</body>
</html>

index.php
********************

<?php
//including the database connection file
include_once("config.php");

//fetching data in descending order (lastest entry first)
//$result = mysql_query("SELECT * FROM contact ORDER BY id ASC"); // mysql_query is deprecated
$result = mysqli_query($mysqli, "SELECT * FROM contact ORDER BY name ASC"); // using mysqli_query instead
?>

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Contact Page</title>
  </head>
  <body>
    <a href="add.html">Add New Data</a><br/><br/>

    <table width='80%' border=0>
        <tr bgcolor='#CCCCCC'>
            <td>Name</td>
            <td>Address</td>
            <td>Phone/Email</td>
            <td>Update</td>
        </tr>
        <?php
        //while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array
        while($res = mysqli_fetch_array($result)) {       
            echo "<tr>";
            echo "<td>".$res['name']."</td>";
            echo "<td>".$res['address']."</td>";
            echo "<td>".$res['email']."</td>"; 
            echo "<td><a href=\"edit.php?id=$res[id]\">Edit</a> | <a href=\"delete.php?id=$res[id]\" onClick=\"return confirm('Are you sure you want to delete?')\">Delete</a></td>";     
        }
        ?>
    </table>
 <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
*********************
OOP Database Crude
**********************
config.php
------------------
<?php

define("DB_HOST","localhost");
define("DB_USER","root");
define("DB_PASS","");
define("DB_NAME","firozshah");
?>

database.php
----------------
<?php

class Database{

public $host = DB_HOST;
public $user = DB_USER;
public $pass = DB_PASS;
public $dbname = DB_NAME;

public $link;
public $error;

public function __construct(){
$this->connectDB();
}
private function connectDB(){

$this->link = new mysqli($this->host, $this->user, $this->pass, $this->dbname);
if(!$this->link){

$this->error="Connection Failed".$this->link->connect_error;
return false;
}
}
// Select or read database
public function select($query){

$result=$this->link->query($query) or die($this->link-error__LINE__);
if($result->num_rows>0){
return $result;
}else{
return false;
}
}
}
?>
style.css
------------------
.tblone{wodth:100%; border:1px solid #fff; margin:20px 0}
.tblone th{padding:5px 10px;text-align:left; }
.tblone td{padding:5px 10px;text-align:left; }
table.tblone tr:nth-child(2n+1){background:#ffffff; height:30px;}
table.tblone tr:nth-child(2n){background:#f1f1f1f1; height:30px;}
#myform{width:400px;border:1px solid #ffffff;padding:10px;}
index.php
------------------
<?php include('include/header.php');?>
<?php include('config.php');?>
<?php include('database.php');?>
<!---------------------------------------------------------------------------------------------->
<?php
$db= new Database();

$query="SELECT * FROM contact";
$read= $db->select($query);
?>
<table class="tblone">

<tr>
<th width="5%">id</th>
<th width="25%">name</th>
<th width="30%">address</th>
<th width="30%">phone/email</th>
<th width="10%">action</th>
</tr>
<?php  if($read) {?>
<?php while($row=$read->fetch_assoc()){?>
<tr>
<td width="20%"><?php echo $row['id'];?></td>
<td width="20%"><?php echo $row['name'];?></td>
<td width="20%"><?php echo $row['address'];?></td>
<td width="20%"><?php echo $row['email'];?></td>
<td width="20%"><a href="update.php?id=<?php echo $row['id'];?>">Edit</a></td>
</tr>
<?php } ?>
<?php }else{ ?>

<p>Data is not available!!</p>

<?php } ?>
</table>

<!--------------------------------------------------------------------------------------------->
<?php include('include/footer.php');?>




***********************************************
1.Use of jQuery framework Add/Remove class
**********************************************
style.css
---------------
#webcoachbd{
font-weight:bolder;
font-family:Verdana;
}
.redPara{
color:#f00;
}
.greenPara{
color:green;
}
******************
custom.js
----------
$('#colorRed').click(function(){

$('#webcoachbd').addClass('redPara')

.removeClass('greenPara');


});

$('#colorGreen').click(function(){

$('#webcoachbd').addClass('greenPara')

.removeClass('redPara');

});
*********************
index.html
--------------------
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>



<script type="text/javascript">



</script>

</head>

<body>

<button id="colorRed">Click here for red color</button>

<button id="colorGreen">Click here for green color</button>

<p id="webcoachbd">JQuery is a popular javascript framework</p>
<script  src="js/jQuery.js" type="text/javascript"></script>
<script src="js/custom.js"></script>
</body>

</html>
*********************************************************************
2.Add/Remove class
************************************************************************
style.css
---------------
#webcoachbd{
font-weight:bolder;
font-family:Verdana;
}
.redPara{
color:#f00;
}
.bluePara{
color:blue;
}
******************
custom.js
----------
$('#colorRed').click(function(){

$('#webcoachbd').addClass('redPara')

.removeClass('bluePara');

});

$('#colorBlue').click(function(){

$('#webcoachbd').addClass('bluePara')

.removeClass('redPara');

});
*********************
index.html
--------------------
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>

</head>

<body>

<button id="colorRed">Click here for red color</button>

<button id="colorBlue">Click here for blue color</button>

<p id="webcoachbd">JQuery is a popular javascript framework</p>


<script  src="js/jQuery.js" type="text/javascript"></script>
<script src="js/custom.js"></script>
</body>

</html>
*************************************
জেকোয়েরি each() মেথড (jQuery each)
****************************************
style.css
---------------
#webcoachbd{
font-weight:bolder;
font-family:Verdana;
}
.redPara{
color:#f00;
}
.bluePara{
color:blue;
}
******************
custom.js
----------
$('#colorRed').click(function(){

$('#webcoachbd').addClass('redPara')

.removeClass('bluePara');

});

$('#colorBlue').click(function(){

$('#webcoachbd').addClass('bluePara')

.removeClass('redPara');

});
*********************
index.html
--------------------
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>

</head>

<body>

<button id="colorRed">Click here for red color</button>

<button id="colorBlue">Click here for blue color</button>

<p id="webcoachbd">JQuery is a popular javascript framework</p>


<script  src="js/jQuery.js" type="text/javascript"></script>
<script src="js/custom.js"></script>
</body>

</html>
*************************************
Drop down menu
****************************************
style.css files
--------------------
body {
font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size: 12px;
}

#content{
width:800px;
margin:0 auto;
background: green;
padding: 15px;
min-height:200px;
}

#menu li{
float:left;
list-style:none;
position:relative;
margin-right:4px;
}

.rem_radius a,.rem_radius a:hover{
border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;
}

#menu li ul{
display:none;
float:left;
position:absolute;
top:36px;
padding:0;
}

#menu li ul li{
width:150px;
border-radius:0;
}

#menu li ul li a{
width:130px;
border-radius:0;
}

#menu li ul li:first-child a,#menu li ul li:first-child a:hover{
border-top-right-radius:6px!important;
}

#menu li ul li:last-child a,#menu li ul li:last-child a:hover{
border-bottom-left-radius:6px!important;    border-bottom-right-radius:6px!important;
}

#menu li a{
display:block;
float:left;
color:#fff;
background:#000;
font-weight:bold;
text-decoration:none;
padding:10px;
border-radius:6px;
}

#menu li a:hover{
background:#333;
border-radius:6px;
}

#menu li ul li a:hover{
background:#333;
border-radius:0;
}

index.html file
-----------------

<!doctype html>
 <html>
<head>
<title>Webcoachbd!</title>

<link rel="stylesheet" href="css/style.css" type="text/css"/>

</head>

<body>
<!--body start-->
<!--main content start-->
 <div id="content">

  <ul id="menu">

    <li><a href="#">Reference</a>

     <ul>

      <li><a href="#">PHP</a></li>

      <li><a href="#">MySql</a></li>

      <li><a href="#">CakePHP</a></li>

     </ul>

    </li>

    <li><a href="#">Tutorials</a>

     <ul>

      <li><a href="#">HTML tutorials</a></li>

      <li><a href="#">JQuery drop down menu</a></li>

     </ul>

    </li>

    <li><a href="#">About Us</a></li>

  </ul>

 </div>
 <!--end of main content-->
<script src="/script.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
<!--end of body-->
</body>

</html>

custom.js files
-----------------------
$('#menu li').hover(function(){
$(this).find('ul').stop(true,true).slideDown(200);
},function(){
$(this).find('ul').stop(true,true).slideUp(200);
});
$('#menu li').hover(function(){
if($(this).children('ul').length > 0){
$(this).addClass('rem_radius');
}
}, function(){
$(this).removeClass('rem_radius');
});
*************************************
Form Validation
****************************************
style.css
--------------

body{

font-family:Verdana;

font-size:13px;

}

#form_container{

width:400px;

margin:0 auto;

overflow:hidden;

border:1px solid #ccc;

border-radius:5px;

padding:10px;

}

h2{

text-align:center;

}

.error{

color:#f00;

}

#form_container span{

float:right;

display:block;

clear:both;

}

#form_container label{

display:block;

float:left;

margin:5px 0;

width:150px;

}

#form_container input{

float:right;

margin:5px 0;

}

#form_container input[type="submit"]{

float:left;

margin:8px 0 0 254px;

}


custom.js
--------------------




$('#reg_form')

.submit(function () {

if (validateTextField('f_name', 'fnameInfo') & validateTextField('l_name', 'lnameInfo') & validateEmail('email', 'mailInfo') & validateNumber('phone', 'phoneInfo')) {

return true;

} else {

return false;

}




function validateTextField(fieldName, Id) {

//if it's NOT valid

if ($('input[name=' + fieldName + ']')

.val()

.length < 1) {

$('#' + Id)

.text('Please enter any  text').fadeIn();

$('#' + Id)

.addClass('error');

return false;

} else if (isNaN($('input[name=' + fieldName + ']')

.val()) == false){

$('#' + Id)

.text('Please enter any  text').fadeIn();

$('#' + Id)

.addClass('error');

return false;

}

//if it's valid

else {

$('input[name=' + fieldName + ']')

.removeClass('error');

$('#' + Id)

.fadeOut();

return true;

}

}

function validateEmail(fieldName, Id) {

//testing regular expression

var a = $('input[name=' + fieldName + ']')

.val();

var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;

//if it's valid email

if (filter.test(a)) {

//$('#'+fieldName).removeClass('error');

$('#' + Id)

.fadeOut();

$('#' + Id)

.removeClass('error');

return true;

}

//if it's NOT valid

else {

$('#' + Id)

.text('Please Type a valid e-mail address');

$('#' + Id)

.addClass('error');

return false;

}

}

function validateNumber(fieldName, Id) {

//if it's NOT valid

if (isNaN($('input[name=' + fieldName + ']')

.val())) {

$('#' + Id)

.text('Only number please,no text allowed');

$('#' + Id)

.addClass('error');

return false;

} else if ($('input[name=' + fieldName + ']')

.val() < 1){

$('#' + Id)

.text('Please fill the field').fadeIn();

$('#' + Id)

.addClass('error');

return false;

}

//if it's valid

else {

$('input[name=' + fieldName + ']')

.removeClass('error');

$('#' + Id)

.fadeOut();

$('#' + Id)

.removeClass('error');

return true;

}

}

});
index.html
-------------------------

<!DOCTYPE html>

<html>

<head>

<title>Webcoachbd form validation tutorials</title>

<link rel="stylesheet" href="css/style.css" type="text/css"/>


</head>

<body>

<h2>Fill up form and hit submit</h2>

<div id="form_container">

<form id="reg_form" action="" method="post">

<label>First Name</label>

<input type="text" name="f_name" placeholder="First Name"/>

<span id="fnameInfo"></span>

<label>Last Name</label>

<input type="text" name="l_name" placeholder="Last Name"/>

<span id="lnameInfo"></span>

<label>Email</label>

<input type="text" name="email" placeholder="Email"/>

<span id="mailInfo"></span>

<label>Phone Number</label>

<input type="text" name="phone" placeholder="Phone"/>

<span id="phoneInfo"></span>

<input type="submit" value="Submit"/>

</form>

</div>

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>

<script src="/script.js" type="text/javascript"></script>

</body>

</html>