Wenn Eingabefeld leer ist Laufbedingung, sonst Laufbedingung 2

Das funktioniert gut, das einzige Problem ist, wenn ich alle Zeichen von der Eingabe lösche und die "Senden" -Taste drücke, "Feld erforderlich" wird nicht angezeigt und die Nachricht "Mindestens 8 Zeichen" bleibt erhalten.Wenn Eingabefeld leer ist Laufbedingung, sonst Laufbedingung 2

Ich hoffe, Sie können mir helfen, Prost.

$(function() { 
 

 
    var elInput = $('#username'); 
 
    var message = $('.msg'); 
 

 
    $('#send').on('click', function(e) { 
 
    e.preventDefault(); 
 
    if(!elInput.val()) { 
 
     message.addClass('msg2'); 
 
    } else { 
 
     if(elInput.val().length < 8) { 
 
     message.css({ 
 
      'color': 'grey', 
 
      'display': 'inline' 
 
     }).text('Minimum 8 characters'); 
 
     } else { 
 
     message.css('display', 'none'); 
 
     } 
 
    } 
 
    }) 
 
})

.msg { 
 
    display: none; 
 
} 
 
.msg2 { 
 
    display: inline; 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <h1>Validation Form</h1> 
 
    <form> 
 
    <label for="username">Name</label><br/> 
 
    <input type="text" id="username" placeholder="username"><br/> 
 
    <span class="msg">Field required</span><br/> 
 

 
    <button id="send">Send</button> 
 
    </form> 
 
</body>

Quelle

2016-07-24 tavozapata

, wie Sie elInput Wert zu erhalten? –

Probieren Sie 'if (! ElInput.val(). Trim())' aus, um Leerzeichen zu entfernen, oder expliziter 'if (elInput.val(). Length == 0) '. Wo haben Sie auch "elInput" definiert? –

Bitte bearbeiten Sie Ihre Frage, um das relevante HTML und den Rest des Skripts bereitzustellen. – nicael

hinzufügen:

if(elInput.val().length == 0) { 
     message.css({ 
      'color': 'grey', 
      'display': 'inline' 
     }).text('Required');

und bearbeiten:

if(elInput.val().length < 8 && elInput.val().length != 0) { 
    message.css({ 
     'color': 'grey', 
     'display': 'inline' 
    }).text('Minimum 8 characters');

Quelle

2016-07-24 15:57:18

Ja, es funktioniert, vielen Dank. Aber weißt du, warum meins nicht funktioniert hat? – tavozapata

@tavozapata Weil Länge <8 bedeutet Länge == 0 zu –

Aber ich tat das und es hat auch funktioniert: if (! ElInput.val()) { message.css ({ 'Farbe': 'rot', ' Anzeige ':' inline ' }). text (' Feld erforderlich '); } else { if (elInput.val() Länge <8.) { message.css ({ 'Farbe': 'grau', 'display': 'inline' }). Text ('Minimum 8 Figuren'); } else { message.css ('display', 'none'); } } – tavozapata

Wenn Eingabefeld leer ist Laufbedingung, sonst Laufbedingung 2

Antwort

Verwandte Themen