Live validation adding/updating data in a table php,ajax,javascript

Question

Can help me to solve this?

I got a table and I have added 2 buttons to add or update information.

I wanna make a validation in the "description" field where **you can only write letters and less than 255 characters, and in the "name" field you can only write less than 50 characters. Anyway, I can not click on the button "save" or "add" respectively (the button is locked until everything is right).

Also, the page must show "In real time (before clicking the button) the errors in each field".

Here is my code, when adding new informationin the table:

<?php include('connect.php'); 
    $error="";

    if(isset($_POST['btnsave']))
    {
        $career_id=$_POST['carrera'];
        $name=$_POST['txtname'];
        $description=$_POST['txtdescription'];
        $hourss=$_POST['txthours'];

        if($_POST['txtid']=="0")
        {
            $a_sql=mysql_query("INSERT INTO subjects VALUES('','$career_id','$name','$description','$hourss')");
            if($a_sql)
            {
                header("location:index.php");//
            }
        }else{
            echo "Update";
        }
    }

    $sqlm = mysql_query("SELECT * FROM careers");
    $options = "";
    while($result = mysql_fetch_array($sqlm)){
            $options .= "<option value='".$result['id']."'>".$result['name']."</option>";
    }
?>

    <h2 align="center">ADD NEW SUBJECT</h2>
    <form method="Post">
        <table align="center">
                <tr>    
                    <td>Career:</td>
                    <td><select name='carrera'><?php echo $options; ?></select><input type="hidden" name="txtid" value="0" /></td>
                </tr>
                <tr>    
                    <td>Name:</td>
                    <td><input type='text' name='txtname'/></td>
                </tr>
                <tr>    
                    <td>Description:</td>
                    <td><input type='text' name='txtdesription'/></td>
                </tr>
                <tr>    
                    <td>Hours:</td>
                    <td>
                        <select name='txthours'/>
                            <option <?php if($hourss=='1') echo 'selected' ; ?> value="2">2 (two)</option>
                            <option <?php if($hourss=='1') echo 'selected' ; ?> value="4">4 (our)</option>
                            <option <?php if($hourss=='1') echo 'selected' ; ?> value="6">6 (six)</option>
                            <option <?php if($hourss=='1') echo 'selected' ; ?> value="8">8 (eight)</option>
                            <option <?php if($hourss=='1') echo 'selected' ; ?> value="10">10 (ten)</option>
                        </select>
                    </td>
                </tr>
                <tr>    
                    <td></td>
                    <td><input type='submit' value=save name='btnsave'/></td>
                </tr>
        </table>
    </form>

And the another code updates the information in the table:

<?php include('connect.php'); 
    $error="";
    if(isset($_GET['edit']))
    {
        $ident=$_GET['iden'];
        $row=mysql_query("SELECT * FROM subjects WHERE id=$ident");
        $st_row=mysql_fetch_array($row);
    }
?>

    <h2 align="center">UPDATE SUBJECT</h2>
    <form method="Post" action=''>
        <table align="center">
            <tr>    
                <td>Career:</td>
                <td><input type='text' name='txtcarreras_id' value="<?PHP echo $st_row['career'] ?>"/></td>
                </tr>
            <tr>    
                <td>Name:</td>
                <td><input type='text' name='txtnombre' value="<?PHP echo $st_row['name'] ?>"/></td>
            </tr>
            <tr>    
                <td>Description:</td>
                <td><input type='text' name='txtdescripcion' value="<?PHP echo $st_row['description'] ?>"/></td>
            </tr>
            <tr>    
                <td>Hours:</td>
                <td><input type='text' name='txtcarga_horaria' value="<?PHP echo $st_row['hours'] ?>"/></td>
            </tr>
            <tr>    
                <td></td>
                <td><input type='submit' value="save" name='btnsave'/></td>
            </tr>
        </table>
    </form>

<?php
    if(isset($_POST['btnsave']))
    {
        $career_id=$_POST['txtcarreras_id'];
        $name=$_POST['txtnombre'];
        $description=$_POST['txtdescripcion'];
        $hours=$_POST['txtcarga_horaria'];

        $a_sql=mysql_query("UPDATE materias SET career='$career_id', name='$name', description='$description', hours='$hours' WHERE id='$ident'");
            if($a_sql)
            {
                header("location:index.php");
            }
        }
?>

I know, there are a lot of ways to solve this but i wanna the very best method!

Hope you can help me :)

Thanks!

Answer 1

You can do that using Javascript. With Jquery or another library it's even easier.

Using jQuery:

$('input[name=txtname]').keyup(function() {
  if ($(this).val().length < 50) {
    // Do Error stuff here
  } else {
    // Remove error stuff here
  }
});

If you have jQuery and use the above keyup event handler, it should display as you type.