Frage zum Wiki-Artikel „Validierung von Formularen“

[Chris234]

Hallo,

ich versuche bei meinen Formularen die Wertebereiche der Eingaben zu begrenzen. Die input Elemente sind vom Typ number. Ich habe über die Attribute min, max und step die entsprechenden Einstellungen vorgenommen und solange ich über die Pfeile die Zahlenwerte einstelle funktioniert das auch gut. Aber wenn ich über die Tastatur die Zahlen eingebe funktioniert die Prüfung nicht. Es werden zwar nur Zahlen akzeptiert und wenn über step nur ganze Zahlen akzeptiert werden die Nachkommastellen abgeschnitten, aber die Prüfung ob die Zahlen außerhalb des Wertebereichs liegen funktioniert nicht. Verstehe ich die Funktionsweise der Attribute falsch? Kann mir eventuell jemand helfen, wie ich eine "einfache" Wertebereichsprüfung realisieren kann, die nur die erlaubten Werte übermittelt?

Ich habe meinen HTML-Code angehängt, die cfg, id und category Attribute werden für die dynamische Anzeige des Inhaltes benötigt, da der Webserver über XML und eine Busstruktur mit der SPS kommuniziert. Mir ist bewusst, dass eine clientseitige Überprüfung umgangen werden kann und die serverseitige Prüfung nicht ersetzt, trotzdem soll clientseitig die Überprüfung im besten Fall nur valide Werte durchlassen.

Vielen Dank im voraus, Chris234

<div class="content_view">
  <table class="centeredTable" style="border: 10px solid #4C4C46">
    <tr>
      <td><span cfg="251" id="cfg_02" category="Diagnose">Tag</span></td>
      <td><span cfg="252" id="cfg_03" category="Diagnose">Monat</span></td>
      <td><span cfg="253" id="cfg_04" category="Diagnose">Jahr</span></td>
    </tr>
    <tr>
        <td><input id="value_wDiagSPSZeit_Tag" type="number" min="1" max="31" step="1" value="24" onchange="onManualValueChange(this)"></td>
      <td><input id="value_wDiagSPSZeit_Monat" type="number" min="1" max="12" step="1" value="10" onchange="onManualValueChange(this)"></td>
      <td><input id="value_wDiagSPSZeit_Jahr" type="number" min="2000" max="2100" step="1" value="2017" onchange="onManualValueChange(this)"></td>
    </tr>
      <tr><td colspan="3"><br></td></tr>
    <tr>
      <td><span cfg="254" id="cfg_05" category="Diagnose">Stunde</span></td>
      <td><span cfg="255" id="cfg_06" category="Diagnose">Minute</span></td>
      <td><span cfg="256" id="cfg_07" category="Diagnose">Sekunde</span></td>
    </tr>
    <tr>
      <td><input id="value_wDiagSPSZeit_Stunde" type="number" min="0" max="23" step="1" value="12"  onchange="onManualValueChange(this)"></td>
      <td><input id="value_wDiagSPSZeit_Minute" type="number" min="0" max="59" step="1" value="30"  onchange="onManualValueChange(this)"></td>
      <td><input  id="value_wDiagSPSZeit_Sekunde" type="number" min="0" max="60" step="1" value="0" onchange="onManualValueChange(this)"></td>
    </tr>
    <tr>
      <td style="padding-top: 100px;"><button id="spsLesenBtn0" type="button" name="sps_lesen" onClick="showLoader();spsChangeBit('wDiagSPSZeit_SPSLesen', 'wDiagSPSZeit_SPSLesen_IO');"><img src="../images/sps_lesen.png" alt=" "><span cfg="193" id="cfg_09" category="Main">&nbsp;SPS lesen</span></button></td>
      <td style="padding-top: 100px;"><button type="button" name="sps_schreiben" onClick="showLoader();spsWriteAllValues('wDiagSPSZeit_SPSSchreiben', 'wDiagSPSZeit_SPSSchreiben_IO');"><img src="../images/sps_schreiben.png" alt=" "><span cfg="194" id="cfg_10" category="Main">&nbsp;SPS schreiben</span></button></td>
        <td> &nbsp; </td>
    </tr>
  </table>
</div>