使用 jquery&CSS 的验证不起作用

Question

我正在尝试（没有成功：/）在单击按钮之前对表格中的“名称”和“描述”字段进行表单验证（实时验证）。 我的意思是，在一切正确之前，“提交”按钮不会做任何事情。

名称只能包含 50 个字符，不能为空（如果为空或大于 50，则会出现红色警报）

说明不允许使用数字且只能包含 255 个字符（如果您插入一个数字或大于 255 的字符，则应显示警报）

这是我的代码，我很努力，但我不知道该怎么做。

            <?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>

只需设置 div id 并在此代码中添加 masg，例如 var masg='只有数字'; $('#divid').html(masg);