nevio18324
commented
6 days ago Stand 12.9
Wir haben nun 3 Lösungen dies umzusetzen da der disabled Attribut ohne gebrauch von JS nicht dynamisch geändert werden kann.
Option 1
Wir brauchen Js das würde dann ungefähr wie folgt aussehen
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("examNumber").addEventListener("input", function () {
const examNumber = document.getElementById("examNumber").value;
const submitButton = document.getElementById("submitButton");
submitButton.disabled = examNumber.length === 0;
});
})Option 2
Wir brauchen ganz simpel denn required falls gewollt auch den pattern Attribut
Option 3
Wir brauchen Bootstrap in der Kombination mit dem pattern und required Attribut dies würde ungefähr wie folgt aussehen
<form class="was-validated col-3" action="#" th:action="@{/search}" th:object="${examNumberForm}" method="post">
<label for="examNumber">Prüfungsnummer eingeben*:</label>
<input type="text" aria-describedby="validationServer03Feedback" class="form-control" required pattern="[0-9]{5}"
name="examNumber" id="examNumber"
placeholder="20202" th:value="*{examNumber}">
<p th:if="${#fields.hasErrors('examNumber')}" th:errors="*{examNumber}">Prüfungsnummer Error</p>
<button class="btn btn-primary" type="submit" id="submitButton">Suchen</button>
</form>
Als Student muss ich die Möglichkeit haben, die Prüfungslaufnummer der aktuellen Prüffungs-Session einzugeben. Ohne Prüfungslaufnummer ist die Suche nicht möglich, deshalb ist der Search Button disabled. Sobald das Eingabefeld nicht leer ist, ist der Search Button enabled.
Anforderungen
Akzeptanzkriterien