de verificación mostrar mensaje de error para un campo de texto vacío

Me gustaría comprobar si un campo de texto en el formulario de envío está vacía antes de publicar usando jquery. Si cualquier, me gustaría mostrar un mensaje de error justo al lado del área de texto. I haga clic en el botón para enviar la información con los campos vacíos, pero no hay mensajes que se muestran. Necesito esta función de verificación antes de la contabilización se realice. Aquí es lo que he hecho.

<!DOCTYPE html>
    <html>
    <head>
    <script src="jquery-1.7.1.min.js"></script>
    <script>
    function ValidateForm()
    {
        $(document).ready(function(
              {
                  $("#personID").each(function()
                       {
                           if(this.val()=="")
                           {
                                $("#error_msg").html("Field needs filling");
                           }              
                       }      
              }
        ));

    }


    </script>
    </head>
    <body>
    <form action="action.php" method="post" id="personID">
    First Name: <input type="text" name="first"><span id="error_msg"></span></br>
    Last Name: <input type="text" name="last"><span id="error_msg"></span></br>
    Phone: <input type="text" name="phone"><span id="error_msg"></span></br>
    Mobile: <input type="text" name="mobile"></br>
    Position: <input type="text" name "pos"><span id="error_msg"></span></br>
    <input type="button" value="Insert" onclick="ValidateForm">
    </form>
    </body>
    </html>
  • Y a tu pregunta?
InformationsquelleAutor Mackintoast | 2012-01-20

3 Kommentare

  1. 1

    La función debe ser

    function ValidateForm()
    {
        $('span.error_msg').html('');
       var success = true;
        $("#personID input").each(function()
            {
                if($(this).val()=="")
                {
                    $(this).next().html("Field needs filling");
                    success = false;
                }
        });
        return success;
    }

    y el formulario debe ser

    <form action="action.php" method="post" id="personID" onsubmit="return ValidateForm();">
        First Name: <input type="text" name="first"><span class="error_msg"></span></br>
        Last Name: <input type="text" name="last"><span class="error_msg"></span></br>
        Phone: <input type="text" name="phone"><span class="error_msg"></span></br>
        Mobile: <input type="text" name="mobile"></br>
        Position: <input type="text" name "pos"><span class="error_msg"></span></br>
        <input type="submit" value="Insert">
    </form>

    No ha agregado ningún lapso siguiente a su teléfono textbox y si se queda vacío el formulario no será enviado y no mostrar mensaje de error, así que estar seguro. Si usted desea dejar opcional, a continuación, agregar una clase a la que (class='optional') y cambiar la función if($(this).val()=="") a if($(this).val()=="" && !$(this).hasClass('optional')). eso es todo.

  2. 2

    Este…

    if(this.val()=="")

    debe ser este…

    if($(this).val()=="")

    o este…

    if(!$(this).val())

    o este…

    if(!this.value)

    Pasando this (que es una referencia al elemento) a la $ función devuelve un objeto jQuery que hace referencia al elemento.

    Que es lo que le da la capacidad de llamar a los métodos jQuery como .val().


    Usted tiene algunos desordenado sintaxis demasiado.

    Cambiar el código para este…

    function ValidateForm() {
        if($("#personID").val()=="") {
            $("#error_msg").html("Field needs filling");
        }              
    }

    Sin necesidad de $(document).ready() ya que el código no se ejecuta hasta que el formulario es enviado.

  3. 0

    Usted puede hacer uso de el evento onsubmit del formulario.
    Asegúrese de cambiar:

    <input type="button" value="Insert" onclick="ValidateForm"> en <input type="submit" value="Insert">

    <form action="action.php" method="post" id="personID"> en <form action="action.php" method="post" id="personID" onsubmit="return ValidateForm();">

    Código completo a continuación:

    function ValidateForm()
    {
        $('span.error_msg').html('');
        var success = true;
        $("#personID input").each(function()
            {
                if($(this).val()=="")
                {
                    $(this).next().html("Field needs filling");
                    success = false;
                }
        });
        return success;
    }
    
    
    <form action="action.php" method="post" id="personID" onsubmit="return ValidateForm();">
    First Name: <input type="text" name="first"><span class="error_msg"></span></br>
    Last Name: <input type="text" name="last"><span class="error_msg"></span></br>
    Phone: <input type="text" name="phone"><span class="error_msg"></span></br>
    Mobile: <input type="text" name="mobile"></br>
    Position: <input type="text" name="pos"><span class="error_msg"></span></br>
    <input type="submit" value="Insert">
    </form>

    EDITAR Muy buen punto de Heera, en realidad no estaba prestando atención a la materia 😉 Fija el código.

    • Rick Kuipers ya dio una buena solución, pero creo que no me di cuenta de la envergadura del «error_msg» se declara como id no de clase. Así que no funcione correctamente me refiero sólo a primer lapso se rellenará con el mensaje de error. Para solucionarlo tienes que utilizar la clase en lugar de id en su «error_msg» span.
    • Buen punto! Estaba prestando más atención a la solución de la presente, en lugar de los mensajes de error 😉 Fijo mi código de acuerdo a la tuya, gracias.
    • Gracias y esta bien, a veces cometemos errores.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea