validacion - validar formulario jquery ejemplo

Formulario Jquery enviar para verificar los campos vacíos

Question

¿Cómo podría usar jquery para comprobar si los campos de texto están vacíos al enviar sin cargar login.php ?

<form action="login.php" method="post">
    <label>Login Name:</label>
    <input type="text" name="email" id="log" />
    <label>Password:</label>
    <input type="password" name="password" id="pwd" />
    <input type="submit" name="submit" value="Login" />
</form>

Gracias.

Answer 1

Puede usar ''requerido'' http://jsbin.com/atefuq/1/edit

<form action="login.php" method="post">
    <label>Login Name:</label>
    <input required type="text" name="email" id="log" />
    <label>Password:</label>
    <input required type="password" name="password" id="pwd" />
    <input  required type="submit" name="submit" value="Login" />
</form>

Answer 2

Puedes hacerlo:

//  Bind the event handler to the "submit" JavaScript event
$(''form'').submit(function () {

    // Get the Login Name value and trim it
    var name = $.trim($(''#log'').val());

    // Check if empty of not
    if (name  === '''') {
        alert(''Text-field is empty.'');
        return false;
    }
});

DEMO DE FIDDLE

Answer 3

Realmente odio las formas que no me dicen qué entrada (s) falta (s). Así que mejoré la respuesta de Dominic, gracias por esto.

En el archivo css, la clase "borderR" en borde tiene un color rojo.

$(''#<form_id>'').submit(function () {
    var allIsOk = true;

    // Check if empty of not
    $(this).find( ''input[type!="hidden"]'' ).each(function () {
        if ( ! $(this).val() ) { 
            $(this).addClass(''borderR'').focus();
            allIsOk = false;
        }
    });

    return allIsOk
});

Answer 4

Una solución simple sería algo como esto.

$( "form" ).on( "submit", function() { 

   var has_empty = false;

   $(this).find( ''input[type!="hidden"]'' ).each(function () {

      if ( ! $(this).val() ) { has_empty = true; return false; }
   });

   if ( has_empty ) { return false; }
});

Nota: el método jQuery.on() solo está disponible en la versión 1.7+ de jQuery, pero ahora es el método preferido para adjuntar controladores de eventos.

Este código recorre todas las entradas del formulario e impide el envío del formulario devolviendo false si alguno de ellos no tiene ningún valor. Tenga en cuenta que no muestra ningún tipo de mensaje al usuario acerca de por qué no se pudo enviar el formulario (recomiendo encarecidamente agregar uno).

O bien, puede ver el complemento de validación de jQuery . Hace esto y mucho más.

NB: este tipo de técnica siempre debe usarse junto con la validación del lado del servidor.

Answer 5

deberías probar con el complemento de validación jquery:

$(''form'').validate({
   rules:{
       email:{
          required:true,
          email:true
       }
   },
   messages:{
       email:{
          required:"Email is required",
          email:"Please type a valid email"
        }
   }
})

Answer 6

es necesario agregar un controlador al formulario submit evento. En el controlador, debe verificar cada campo de texto, seleccionar los campos de elemento y contraseña si los valores no están vacíos.

$(''form'').submit(function() {
     var res = true;
     // here I am checking for textFields, password fields, and any 
     // drop down you may have in the form
     $("input[type=''text''],select,input[type=''password'']",this).each(function() {
         if($(this).val().trim() == "") {
             res = false; 
         }
     })
     return res; // returning false will prevent the form from submitting.
});

Answer 7

function isEmpty(val) {
if(val.length ==0 || val.length ==null){
    return ''emptyForm'';
}else{
    return ''not emptyForm'';
}

}

$(document).ready(function(){enter code here
    $( "form" ).submit(function( event ) {
        $(''input'').each(function(){
           var getInputVal = $(this).val();
            if(isEmpty(getInputVal) ==''emptyForm''){
                alert(isEmpty(getInputVal));
            }else{
                alert(isEmpty(getInputVal));
            }
        });
        event.preventDefault();
    });
});

Answer 8

var save_val = $("form").serializeArray();
$(save_val).each(function( index, element ) {
    alert(element.name);
    alert(element.val);
});