input "is not focusable"

[MrStools]

Bei folgendem Code:

<div class="form-group col-lg-4">
    <label for="minbest">Mindestbestellwert €</label>
    <input type="number" id="minbest" name="min_bestellwert" class="form-control" min="1.00" max="9999.99" step=".01" placeholder="1.00 - 9999.99">
</div>

bekomme ich in Chrome(!) die Meldung:

An invalid form control with name='min_bestellwert' is not focusable.

Google sagt mir, ich solle "hidden" und/oder "required" rausnehmen, oder novalidate setzen. Aber da ist kein hidden und auch kein required und es widerstrebt mir, novalidate einzusetzen.

Was kann hier noch die Ursache sein? Und noch wichtiger: Wie behebe ich das? Danke.

 

[floq0r]

Ist das input über das formatting vielleicht nicht visible? D.h. display: none; auf dem input oder einem parent.

 

[MrStools]

doch ist es, eigentlich ist an dem Feld überhaupt nichts besonderes

 

[floq0r]

Hast du einen submit event handler für deine Form, der beim submit vielleicht der form validation in die Quere kommt? Kannst du verifizieren ob das input onSubmit auch tatsächlich focusable ist?

 

[aronlad]

step=".01"

Kann sein, dass das so nicht valid ist, probiere mal mit führender 0.

 

[MrStools]

@aronlad Step geändert auf 0.01 - ändert nichts
@floq0r Da ist kein handler. Wie meinst du das mit "Kannst du das verifizieren" - wie sollte ich das tun?

 

[floq0r]

Ich tappe im Dunklen weil ich deinen Code nicht kenne. So wie ich das sehe wäre ein input nur dann nicht focusable wenn es nicht displayed wird (display none) oder nicht visible ist (visibility hidden).
Hier gibts noch ein paar Ansätze, ich nehme an den Thread wirst du eh gefunden haben https://stackoverflow.com/questions/22148080/an-invalid-form-control-with-name-is-not-focusable

 

[MrStools]

Kann man nichts machen. Ich werde weiter herumdoktern und sollte ich es in den Griff bekommen, versuche ich hier zu melden, was ich geändert habe. Danke!

 

[SenfglasvonThie]

<label for="minbest">Mindestbestellwert €</label>
<input type="number" id="minbest" name="min_bestellwert" class="form-control" min="1.00" max="9999.99" step=".01" placeholder="1.00 - 9999.99">

oder

<input type="number" id="minbest" name="min_bestellwert" class="form-control" min="1.00" max="9999.99" step=".01" placeholder="1.00 - 9999.99" tabindex="0">

Durch Hinzufügen des Attributs "tabindex" mit dem Wert "0" wird das Element "input" fokussierbar.

 

[floq0r]

Ein input ist default immer focusable

 

[MrStools]

Wasserstandsmeldung:

Es hat mit fehlerhaften Eingaben zu tun, die ja manuell immer noch möglich sind, trotz min und max.

Daher fängt jetzt ein kleines Skript solche Fehleingaben ab:

$("#minbest").focusout( function() {
    let mb = $("#minbest").val();
    mb = mb.replace(/(\d*\.?\d?\d?)\d*/, "$1");
    $("#minbest").val(mb);
}

(Zu große und zu kleine Werte werden woanders abgefangen)

Hoffe das hilft vielleicht mal jemandem. Danke für eure Hilfe!

 

[floq0r]

Das erklärt warum es nicht valid ist, aber nicht, warum es lt. Chrome nicht focusable ist.

 

[MrStools]

Ja das stimmt natürlich.

 

[MrStools]

Ich muss mich entschuldigen, tatsächlich wird das Feld (im Verlauf einer Formularstrecke) ausgeblendet und in Verbindung mit einer Fehleingabe kommt es dann zu diesem Fehler. Dadurch, dass Fehleingaben nun verhindert werden, ist das Geschichte. Aber ich wollte doch aufklären, auch wenn ich dabei ein wenig dumm dastehe.

 

[floq0r]

Kein Problem, das erklärt zumindest den behavior, das ist mir schon sein paar Tage im Kopf herumgegeistert