Für Dein Beispiel:
<html>
<form method="post" name="form_prio">
<label for="nummer">Nummer</label>
<input type="text" name="nummer" id="nummer" required>
<label for="farbe">Farbe</label>
<input type="text" name="farbe" id="farbe" value="">
<button id="btn_eintragen" value="Eintragen">Eintragen</button>
</form>
<script type="text/javascript">
document.getElementById("nummer").addEventListener(
"change",
function () {
var v = Number( document.getElementById("nummer").value );
var o = document.getElementById("farbe");
o.required = ( 100 <= v && 189 >= v );
}
);
</script>
</html>
(<input>
für submit durch das aktuelleren <button>
ersetzt.)
Die Schritte:
-
Mit
document.getElementById("nummer").addEventListener
wird eine Ereignisüberwachung hinzugefügt. Hier habe ich mich für "change" entschieden, das "feuert" wenn der Wert (value) des Formularfeldes geändert (und dieses also verlassen) wird. -
Ich habe eine anonyme Funktion gewählt.
function () {...}
-
Die Zeile
var v = Number( document.getElementById("nummer").value );
sorgt dafür, dass der Text(!) im Input als Zahl bereit steht. Das ist für den nachfolgenden Vergleich wichtig. -
Die Variablen
o
undv
sind nur lokal, also innerhalb der anonymen Funktion gültig (deshalbvar o = ...
). -
In Abhängigkeit vom Wert wird in der Zeile
o.required = ( 100 <= v && 189 >= v );
für den zweiten Input die Eigenschaft required true oder false gesetzt.
Natives Javascript reicht. JQuery ist dafür völlig obsolet.