Formularz jquery przesłać, aby sprawdzić puste pola

Question

Jak mogę użyć jquery, aby sprawdzić, czy pola tekstowe są puste, gdy są przesyłane bez ładowania 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> 

Dzięki.

Answer 1

Można to zrobić:

// 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; 
    } 
}); 

FIDDLE DEMO

Answer 2

Można użyć 'wymagana' 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 3

należy spróbować z jQuery plugin sprawdzania poprawności:

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

Answer 4

Prostym rozwiązaniem byłoby coś takiego

$("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; } 
}); 

Uwaga: Metoda jQuery.on() jest dostępny tylko w wersji 1.7+ jQuery, ale jest obecnie preferowaną metodą mocowania obsługi zdarzeń.

Ten kod wykonuje pętlę przez wszystkie dane wejściowe w formularzu i uniemożliwia wysłanie formularza, zwracając wartość false, jeśli żadna z nich nie ma wartości. Zauważ, że nie wyświetla użytkownikowi żadnej wiadomości o tym, dlaczego formularz nie został przesłany (zdecydowanie zalecamy jego dodanie).

Można też spojrzeć na wtyczkę jQuery validate. Robi to i wiele więcej.

UWAGA: Tego typu techniki należy zawsze używać w połączeniu z walidacją po stronie serwera.

Answer 5

należy dodać obsługę do formularza submit zdarzenia. W programie obsługi należy sprawdzić, czy w polu tekstowym znajdują się pola elementu i hasła, jeśli wartości nie są puste.

$('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 6

Naprawdę nienawidzę formularzy, które nie mówią mi, które dane wejściowe są/brakuje. Więc poprawiam odpowiedź Dominika - dziękuję za to.

W zestawie plików css klasa "borderR" do granicy ma czerwony kolor.

$('#<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 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); 
});