js if (Wert> 0!) Auf Anzahl der Eingabevalidierung falsch

Question

In diesem Beispiel Rückkehr:

<form name="someform" action="somepage.php" method="post"> 
    <input name="length" id="length" type="number" min="1" oninput="validate()"/> 
    <input type="submit" id="submit" value="submit" /> 
</form> 

ich die Submit-Button für längeren Wert deaktivieren möge, die nicht größer als 0 ist, ich habe min = "1" am Eingang, was gut funktioniert, wenn die Benutzer sich auf die Auf-/Ab-Tasten verlassen, um einen Wert einzugeben, aber es hindert sie nicht daran, eine 0 mit der Tastatur einzugeben. Also habe ich die folgende Validierungs-js-Funktion hinzugefügt.

Diese Funktion gibt valid = true zurück, wenn Sie eine 0 in das Feld eingeben und ich verstehe nicht warum. Wenn Sie eine Zahl in der Box haben und sie löschen, so dass die Box leer ist, wird false zurückgegeben, aber 0 ist hier immer wahr.

edit: Sie können eine negative Zahl eingeben, z. B. -5, und das gibt auch wahr zurück.

Ich habe ein jsbin Beispiel hier: http://jsbin.com/qatekupuzu/edit?html,js,console,output

Jede Hilfe wäre diese Arbeit richtig geschätzt zu bekommen.

Answer 1

Keine Notwendigkeit für if speichern Sie einfach den Test innerhalb der boolean valid direkt. Wie folgt aus:

function validate() { 
    var length = document.getElementById("length").value; // get the value 
    var valid = length > 0;        // if length is > 0 then valid will be true, otherwise it will be false 
    document.getElementById("submit").disabled = !valid; // disable if only valid is false 
} 

Answer 2

Sie sollten nicht !length > 0 schreiben. Verwenden Sie stattdessen length != 0 oder length <= 0

Answer 3

warum nicht:

document.getElementById("length").oninput=function(){ 
    this.value=Math.max(this.value,1); 
} 

Oder:

document.getElementById("length").oninput=function(){ 
    this.value=this.value>0?this.value:""; 
} 

Mehr für den Anwender einfach zu verstehen, statt zu deaktivieren ...

Answer 4

validate() Brände auf jeder Tastendruck, so ist es besser, die lengthInput und submitButton o initialisieren bjects einmal und benutzen sie in der Funktion für bessere Leistung.

var lengthInput = document.getElementById("length"), 
 
    submitButton = document.getElementById("submit"); 
 

 
function validate() { 
 
    submitButton.disabled = !(lengthInput.value > 0); 
 
} 
 

 
// initial validation 
 
validate();

<form name="someform" action="somepage.php" method="post"> 
 
    <input name="length" id="length" type="number" min="1" oninput="validate()"/> 
 
    <input type="submit" id="submit" value="submit" /> 
 
</form>

Answer 5

Moderne Tag Browser benötigen keine JavaScript, um die Eingabe zu deaktivieren.

input:invalid { 
 
    /* background-color: #ffdddd; */ 
 
} 
 

 
form:invalid [type="submit"] { 
 
    opacity: .5; 
 
    pointer-events: none; 
 
}

<form name="someform" action="somepage.php" method="post"> 
 
    <input name="length" id="length" type="number" min="1" required/> 
 
    <input type="submit" id="submit" value="submit"/> 
 
</form>

Der Fehler mit Ihrem Code ist die Tatsache, dass es tatsächlich ((!length) > 0) ist. Ändern Sie es zu !(length>0) oder (length<=0) würde mehr Sinn machen. Und Sie vergleichen wirklich eine Zeichenkette mit einer Zahl, also sollte es Number(length) sein, also verlassen Sie sich nicht auf Art Zwang.

Answer 6

Scheint niemand hat dies gefangen, also werde ich diese Antwort werfen, um etwas Licht auf das, was hier wirklich los ist, werfen.

Der Grund dafür, dass Ihre Anweisung sich so verhält, ist, dass es sich nicht um die Aussage handelt, von der Sie denken, dass sie es ist. Lass es uns sehen und sehen.

if(!length > 0) ist was Sie eingegeben haben. Diese Aussage innerhalb der if ist eigentlich zwei Aussagen. !length wird zuerst ausgewertet, dann wird der Wert mit > 0 verglichen.

!length wertet einen booleschen Wert aus, der nur true ist, wenn die Nummer 0 ist. Jede andere Zahl ergibt false. Dann, weil der linke Operator von > ein boolescher > 0 ist, wird als boolean > boolean ausgewertet, was nur true ergibt, wenn die Anweisung true > false ist.

Also das Problem ist nicht die Anweisung falsch zurückgegeben, Sie verwenden nur nicht die Anweisung, die Sie wollen. Was Sie bestimmt zu schreiben, ist if(!(length >0)){ valid = false; } oder prägnante if(length <=0) { valid = false; }

EDIT: Ein weiterer Faktor im Spiel ist hier, die mich length basierend auf dem Variablennamen täuschen. Der Aufruf typeof(length) zeigt, dass diese Variable eine string trotz der number Durchsetzung auf dem Element ist. Das obige gilt für den Typ string mit der Änderung, dass !"" die einzige Zeichenfolge ist, die true auswertet.

Ich bin unklar, ob Sie versuchen, die Länge dieser Zeichenfolge zu validieren, die länger als 0 (dh nicht leer) ist, oder wenn Sie überprüfen möchten, ob die eingegebene Zahl größer als 0 ist ist der Fall, dann ist die Bewertung length.length was Sie wollen. Für Letzteres müssten Sie dies zuerst als int mit parseInt() analysieren.