#75 Limitierung der Prüfungsnummern-Eingabe (#79)

* add limit of input and only allow numbers as input

* remove usless th: from input type

---------

Co-authored-by: Yanick Minder <[email protected]>

src/main/resources/templates/fragments/exam-number-input.html

@@ -4,8 +4,8 @@
 <div>
     <form action="#" th:action="@{/search}" th:object="${examNumberForm}" method="post">
         <label for="examNumber">Prüfungsnummer eingeben*:</label>
-        <input type="text" name="examNumber" id="examNumber"
-               placeholder="20202" th:value="*{examNumber}" required>
+        <input type="text" name="examNumber" id="examNumber" oninput="this.value = this.value.replace(/\D+/g, '')"
+               placeholder="20202" th:value="*{examNumber}" th:maxlength="5" required>
         <button type="submit" id="submitButton">Suchen</button>
         <p th:if="${#fields.hasErrors('examNumber')}" th:errors="*{examNumber}">Prüfungsnummer Error</p>
     </form>

src/test/e2e/cypress/e2e/search.cy.js

@@ -36,7 +36,7 @@ it('should display error when no exams were found', () => {
 });
 
 it('should display error when exam number is invalid', () => {
-    cy.get('input[type="text"]').type('abc');
+    cy.get('input[type="text"]').type('123');
     cy.get('button').click();
     cy.contains('Prüfungsnummer muss 5 Ziffern lang sein');
 });
@@ -81,3 +81,12 @@ it('should rename files to subject-folder they are inside of after downloading',
     }
     cy.expect(i).to.equal(3)
 });
+
+
+it('should not be able to input more than 5 characters', () => {
+    cy.get('input[type="text"]').type('110000').should('have.value', '11000');
+});
+
+it('should not be able to input other characters', () => {
+    cy.get('input[type="text"]').type('a2c').should('have.value', '2');
+});