Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Form validation hat das Textfeld ein gültiges Datum
#1
Hallo Zusammen,

es gibt jede Menge externe plug ins zum Thema Form validation. Doch für meinen Anwendungsfall möchte ich zunächst mit Bootstrap Bordmitteln die Prüfung durchführen. 
Es geht um eine Form mit einen Input Text Feld vom Typ Text um ein Geburtsdatum zu erfassen. Ich habe absichtlich Textfeld genommen damit nicht der Date Picker erscheint. Ich finde es ist unpraktisch ein Geburtsdatum z.B.: .01.01.1965 mit dem Date Picker zu suchen. Jetzt habe ich das Problem dass der Anwender ein ungültiges Datum eingeben kann. 

HTML5
  1. <div class="col-md-6 mb-3">
  2.                                     <label for="Geburtsdatum">Geburtsdatum</label>
  3.                                           <input class="form-control" id="Geburtsdatum" name="Geburtsdatum" placeholder="tt.mm.jjjj" required type="text" value="">
  4.                                     <div class="invalid-feedback">
  5.                                         Ein gültiges Geburtsdatum ist erforderlich.
  6.                                     </div>




Ist es möglich in das Javascript des Text des Feld auszulesen und auf Gültigkeit zu prüfen und wenn nicht das senden des Forms zu blockieren? Oder geht das mit Bordmitteln nicht?

Javascript
  1. <script>
  2.     var FormIsValid = false;
  3.     (function () {
  4.         'use strict';
  5.  
  6.         window.addEventListener('load', function () {
  7.             var forms = document.getElementsByClassName('needs-validation');
  8.  
  9.             Array.prototype.filter.call(forms, function (form) {
  10.                 form.addEventListener('submit', function (event) {
  11.                     if (form.checkValidity() === false) {
  12.                         event.preventDefault();
  13.                         event.stopPropagation();
  14.                         FormIsValid = false;
  15.                     } else {
  16.                         FormIsValid = true
  17.                     }
  18.  
  19.                     form.classList.add('was-validated');
  20.                 }, false);
  21.  
  22.             });
  23.  
  24.  
  25.         }, false);
  26.     })();
  27. </script>


Zitieren
#2
Warum machst du das nicht so:

HTML5
  1.     <style>
  2.         [type="date"]::-webkit-inner-spin-button {
  3.             display: none;
  4.         }
  5.  
  6.         [type="date"]::-webkit-calendar-picker-indicator {
  7.             display: none;
  8.         }
  9.     </style>
  10.  
  11.  
  12. <label for="Geburtsdatum">Geburtsdatum</label>
  13. <input class="form-control" id="Geburtsdatum" name="Geburtsdatum" placeholder="tt.mm.jjjj" required type="date" value="">
  14. <div class="invalid-feedback">
  15. Ein gültiges Geburtsdatum ist erforderlich.
  16. </div>
  17. ...


Zitieren
#3
oh, tausend Dank! erst auf dem zweiten Blick habe ich gemerkt was Du mir vorgeschlagen hast. Du schaltest den Picker einfach aus. Somit kann ich doch ein Date verwenden. Das ist große Klasse.

Ich habe meine Seite komplett angehängt. Würdest du bitte die Situation des validation scrips anschauen. So habe ich es gelöst, das Datum vor dem senden nochmals zu prüfen. Der Hintergrund: im IE11 kann ich das Datum 33.12.2019 eintragen, im Chrome nicht. Schön währe es natürlich wenn nicht nur die Meldung auf das falache Datum ausgegeben wird, sondern das Datumsfeld auch als Falsch "Rot" umrahmt wie sonst auch angezeigt wird. Als Feldprüfungsregel kann ich nur auf "required" prüfen oder? Oder gibt es weitere Optionen wie z.B.: das Datum muss gültig sein oder in einem Range x-y sein? Wohl bemerkt, mit Bootstrap Bordmitteln. Ich weiß, es gibt plugins die können das.



HTML5
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  5.  
  6.     <!-- Bootstrap core CSS -->
  7.     <link rel="stylesheet" href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css">
  8.  
  9.  
  10.     <style>
  11.         [type="date"]::-webkit-inner-spin-button {
  12.             display: none;
  13.         }
  14.  
  15.         [type="date"]::-webkit-calendar-picker-indicator {
  16.             display: none;
  17.         }
  18.     </style>
  19.  
  20.  
  21.  
  22. </head>
  23.  
  24.  
  25. <div class="container">
  26.     <div class="d-block d-sm-none">XS<576px</div>
  27.     <div class="d-none d-sm-block d-md-none">SM>=576</div>
  28.     <div class="d-none d-md-block d-lg-none">MD>=768</div>
  29.     <div class="d-none d-lg-block d-xl-none">LG>=992</div>
  30.     <div class="d-none d-xl-block">XL>=1200</div>
  31. </div>
  32.  
  33.  
  34. <div class="container" id="suchenFormCnt">
  35.     <div class="row">
  36.         <div class="col">
  37.             <h4 class="mb-3">Person suchen</h4>
  38.             <form action="../DAL/getAdress.php" class="needs-validation" id="suchenForm" method="post"
  39.                   novalidate>
  40.  
  41.                 <div class="row">
  42.                     <div class="col">
  43.                         <label for="Namen">Name</label>
  44.                         <input class="form-control" id="Namen" name="Namen" placeholder="" required
  45.                                type="text"
  46.                                value="">
  47.                         <div class="invalid-feedback">
  48.                             Ein gültiger Name ist erforderlich.
  49.                         </div>
  50.                     </div>
  51.                     <div class="col">
  52.                         <label for="vorName">Vorname</label>
  53.                         <input class="form-control" id="Vorname" name="Vorname" placeholder="" required
  54.                                type="text" value="">
  55.                         <div class="invalid-feedback">
  56.                             Ein gültiger Vorname ist erforderlich.
  57.                         </div>
  58.                     </div>
  59.                 </div>
  60.  
  61.                 <div class="row">
  62.                     <div class="col">
  63.  
  64.  
  65.                         <label for="Geburtsdatum">Geburtsdatum</label>
  66.                         <input class="form-control" id="Geburtsdatum" name="Geburtsdatum" placeholder="tt.mm.jjjj"
  67.                                required type="date" value="">
  68.                         <div class="invalid-feedback">
  69.                             Ein gültiges Geburtsdatum ist erforderlich.
  70.                         </div>
  71.  
  72.                     </div>
  73.  
  74.  
  75.                     <div class="col">
  76.                         <label for="passNr">Passnummer</label>
  77.                         <input class="form-control" id="PassNr" name="PassNr" placeholder="" required
  78.                                type="number" value="">
  79.                         <div class="invalid-feedback">
  80.                             Eine gültige Passnummer ist erforderlich.
  81.                         </div>
  82.                     </div>
  83.                 </div>
  84.  
  85.  
  86.                 <hr class="mb-4">
  87.                 <button class="btn btn-primary btn-lg btn-block" type="submit" value="suchen">Person suchen
  88.                 </button>
  89.             </form>
  90.         </div>
  91.     </div>
  92. </div>
  93.  
  94.  
  95. <!-- Bootstrap core JavaScript
  96. ================================================== -->
  97.  
  98. <script src="../vendor/components/jquery/jquery.js"></script>
  99. <script src="../vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  100. <script src="../vendor/jquery-form/form/dist/jquery.form.min.js"></script>
  101.  
  102.  
  103.  
  104.  
  105.     var FormIsValid = false;
  106.     (function () {
  107.         'use strict';
  108.  
  109.         window.addEventListener('load', function () {
  110.             var forms = document.getElementsByClassName('needs-validation');
  111.  
  112.             Array.prototype.filter.call(forms, function (form) {
  113.                 form.addEventListener('submit', function (event) {
  114.  
  115.  
  116.                     //Format umkehren von tt.mm.jjjj nach jjjj-mm-tt
  117.                     var st = document.getElementById("Geburtsdatum").value;
  118.                     var pattern = /(\d{2})\.(\d{2})\.(\d{4})/;
  119.                     var dt = new Date(st.replace(pattern, '$3-$2-$1'));
  120.  
  121.                     if (isNaN(dt) === true){
  122.                        window.alert('Das Geburtsdatum ist ungültig!');
  123.                     }
  124.  
  125.  
  126.                     if ((isNaN(dt) === true) ||
  127.                         (form.checkValidity() === false)) {
  128.                         event.preventDefault();
  129.                         event.stopPropagation();
  130.                         FormIsValid = false;
  131.                     } else {
  132.                         FormIsValid = true
  133.                     }
  134.  
  135.                     form.classList.add('was-validated');
  136.                 }, false);
  137.  
  138.             });
  139.  
  140.  
  141.         }, false);
  142.     })();
  143.  
  144.  
  145.  
  146.  
  147. </body>
  148. </html>




Normals herzlichen Dank für deinen Vorschlag.
Zitieren
#4
Leider erscheint auf dem Android smarth phone das DatePicker Control. 

Hast du eine Idee wie ich das verhindern kann?
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort:





[-]
Letzte Beiträge
eigene CSS für Firefox Browser
Last Post: Tapo
14.06.2019 13:47
» Replies: 2
» Views: 25
Frames?
Last Post: Daniel26
14.06.2019 08:31
» Replies: 4
» Views: 178
Bootstrap 4 Tutorials
Last Post: The-Error
07.06.2019 01:00
» Replies: 1
» Views: 4258

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 245
» Latest member: Vikingscum
» Forum threads: 217
» Forum posts: 891

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

>