Live validation in php

Question

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 don't know what to do :S

If you're writing new code, **_please_ don't use the `mysql_*` functions**. They are old and broken, were deprecated in PHP 5.5 (which is so old it no longer even receives security updates), and completely removed in PHP 7. Use [`PDO`](https://secure.php.net/manual/en/book.pdo.php) or [`mysqli_*`](https://secure.php.net/manual/en/book.mysqli.php) with _prepared statements_ and _parameter binding_ instead. See http://stackoverflow.com/q/12859942/354577 for details. — ChrisGPT was on strike, Mar 19 '17 at 12:23
Your question is very hard to read. Please don't use bold, italics, or all capitals unnecessarily. It looks like you're yelling. — ChrisGPT was on strike, Mar 19 '17 at 12:24
php is not necessary for this question, this is a HTML5 validation at minimum question, and more likely to be a javascript/jquery question considering your requested on-page behaviors. Have you researched this topic? Searched SO for similar posts? — mickmackusa, Mar 19 '17 at 12:26

score 1 · Answer 1 · edited May 23 '17 at 12:09

This is really a Javascript problem, not a PHP problem. PHP operates server-side. To validate in real time, you need to use client-side scripting, which usually means Javascript. For the length it is very easy, just add maxlength="255" to the input field (substitute 50 for 255 for name field, etc.).

Limiting to only letters is more complicated. I would typically use jQuery to check the field on every key press - see JQuery: detect change in input field for one way to do that.

To block the submit button, you can use the disabled property - see What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap) for specifics.

One key, which you will figure out eventually but will save some time getting started, is to assign an id to every input field. IDs must be unique, but for most fields except radio buttons you can set the id to the same value as the name. Then you reference the field in jQuery using $('#id') - referencing by name is slightly more complex.

Note that client-side validation is never enough. Since it runs in the user's browser the user controls it (and thus can modify or disable it). You should _always_ validate server-side as well. — ChrisGPT was on strike, Mar 19 '17 at 12:36

Live validation in php

1 Answers1