Validation using jquery&CSS not working - php

Question

I'm trying (without success :/ ) to do a form validation to the "name" & "description" fields in a table before clicking the button (a live validation).
I mean, the button "submit" wont do anything before everything it's correct.
Name allows 50 characters only, and cannot be empty (if empty or higher than 50 a red alert should appear)
Description does not allow numbers and only 255 characters (if you insert a number or higher than 255 an alert should appear)
Here is my code, i tried so hard and i don´t know what to do.
<?php include('connect.php');
$error="";
if(isset($_GET['editar']))
{
$ident=$_GET['iden'];
$row=mysql_query("SELECT * FROM subjects WHERE id=$ident");
$st_row=mysql_fetch_array($row);
}
$sqlm = mysql_query("SELECT * FROM careers");
$options = "";
while($resultado = mysql_fetch_array($sqlm)){
$options .= "<option value='".$resultado['id']."'>".$resultado['nombre']."</option>";
}
?>
<h2 align="center">UPDATE SUBJECTS</h2>
<form method="Post" action=''>
<table align="center">
<tr>
<td>Career:</td>
<td><select name='txtcarreras_id'><?php echo $options; ?></td>
</tr>
<tr>
<td>Name:</td>
<td><input type='text' class="form-text" id="form-name" name='txtnombre' value="<?PHP echo $st_row['nombre'] ?>"/><span class="error-form" id="error-name"></td>
</tr>
<tr>
<td>Description:</td>
<td><input type='text' class="form-text" id="form-description" name='txtdescripcion' value="<?PHP echo $st_row['descripcion'] ?>"/><span class="error-form" id="error-description"></td>
</tr>
<tr>
<td>Hours:</td>
<td>
<select name='txtcarga_horaria'/>
<option <?php if($carga_horaria=='1') echo 'selected' ; ?> value="2">2 (dos)</option>
<option <?php if($carga_horaria=='1') echo 'selected' ; ?> value="4">4 (cuatro)</option>
<option <?php if($carga_horaria=='1') echo 'selected' ; ?> value="6">6 (seis)</option>
<option <?php if($carga_horaria=='1') echo 'selected' ; ?> value="8">8 (ocho)</option>
<option <?php if($carga_horaria=='1') echo 'selected' ; ?> value="10">10 (diez)</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><input type='submit' value="save" name='btnsave'/></td>
</tr>
</table>
</form>
<?php
if(isset($_POST['btnsave']))
{
$carreras_id=$_POST['txtcarreras_id'];
$nombre=$_POST['txtnombre'];
$descripcion=$_POST['txtdescripcion'];
$carga_horaria=$_POST['txtcarga_horaria'];
$a_sql=mysql_query("UPDATE subjects SET carrera_id='$career_id', name='$nombre', description='$descripcion', hours='$carga_horaria' WHERE id='$ident'");
if($a_sql)
{
header("location:index.php");//
}
}
?>
<script>
function lettersonly(input){
var regex = /[^a-z]/gi;
input.value = input.value.replace(regex, "");
}
</script>
<script>
$(function()){
$("#error-name").hide();
// $("#error-description").hide();
var error_name = false;
// var error_description= false;
$("#form-name").focusout(function() {
check_name();
});
function check_name(){
var nombre_length = $("#form_name").val().length;
if(nombre_length > 50)
{
$("#error-name").html("NO DEBE SUPERAR LOS 50 CARACTERES");
$("#error-name").show();
error_name = true;
}else {
$("#error-name").hide();
}
}
</script>

Answer 1

<script>
$(document).ready(function(){
$("#inputtext").keypress(function(event){
var inputValue = event.which;
// allow letters and whitespaces only.
if(!(inputValue >= 65 && inputValue <= 123) && (inputValue != 32 && inputValue != 0)) {
event.preventDefault();
}
});
$("#lastname").keypress(function(event){
var inputValue = event.which;
// allow letters and whitespaces only.
if(!(inputValue >= 65 && inputValue <= 123) && (inputValue != 32 && inputValue != 0)) {
event.preventDefault();
}
});
$("#middlename").keypress(function(event){
var inputValue = event.which;
// allow letters and whitespaces only.
if(!(inputValue >= 65 && inputValue <= 123) && (inputValue != 32 && inputValue != 0)) {
event.preventDefault();
}
});
$("#age").keypress(function(event){
var inputValue = event.which;
// allow letters and whitespaces only.
if( (inputValue >=65 && inputValue <=123 ) && (inputValue >=32 && inputValue <=47 )) {
event.preventDefault();
}
else if((inputValue >=32 && inputValue <=47 ))
{
event.preventDefault();
}
else if((inputValue >=91 && inputValue <=96 ))
{
event.preventDefault();
}
else if((inputValue >=123 && inputValue <=127 ))
{
event.preventDefault();
}
else if(inputValue < 1 && inputValue >100)
{
alert("the age must be a number between 1 and 100");
return false;
}
else if(inputValue >=92 && inputValue <=123 )
{
event.preventDefault();
}
});
$("#txtct").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A, Command+A
(e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: home, end, left, right, down, up
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
});
</script>
Just set div id and add masg in this code like
var masg='only number';
$('#divid').html(masg);