Wie überprüfe ich, ob Textfelder beim Absenden des Formulars mit jQuery leer sind?

Wie könnte ich jQuery verwenden, um zu prüfen, ob Textfelder beim Senden ohne Laden leer sind 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>

Vielen Dank.

Sie können einen Event-Handler mit jQuery an das JavaScript-Event „submit“ binden .submit Methode und dann getrimmt #log Textfeldwert und prüfen, ob leer oder nicht wie:

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

GEIGE-DEMO

Sie können ‘erforderlich’ verwenden 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>

Eine einfache Lösung wäre so etwas

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

Beachten Sie das jQuery.on() -Methode ist nur in jQuery-Version 1.7+ verfügbar, ist aber jetzt die bevorzugte Methode zum Anhängen von Event-Handlern.

Dieser Code durchläuft alle Eingaben im Formular und verhindert die Formularübermittlung, indem er „false“ zurückgibt, wenn eine davon keinen Wert hat. Beachten Sie, dass dem Benutzer keinerlei Meldung darüber angezeigt wird, warum das Formular nicht gesendet werden konnte (ich würde dringend empfehlen, eine hinzuzufügen).

Oder Sie könnten sich die ansehen jQuery validieren Plugin. Es tut dies und noch viel mehr.

Hinweis: Diese Art von Technik sollte immer in Verbindung mit serverseitiger Validierung verwendet werden.

Sie müssen dem Formular einen Handler hinzufügen einreichen Veranstaltung. Im Handler müssen Sie für jedes Textfeld prüfen, Element- und Passwortfelder auswählen, wenn die Werte nicht leer sind.

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

Ich hasse Formulare, die mir nicht sagen, welche Eingaben fehlen. Also verbessere ich die Antwort von Dominic – danke dafür.

In der CSS-Datei setzen Sie die Klasse “borderR” auf border hat rote Farbe.

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

Sie sollten es mit dem jquery validate plugin versuchen:

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

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