kostenloser Webspace werbefrei: lima-city

Attribut required entfernen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   all-in1

   

   all-in1 hat kostenlosen Webspace.

   9:55, 19.9.2015

   In einem Formular habe ich eine Checkbox. Wenn diese ausgewählt wird, wird ein input Feld eingeblendet, dass ausgefüllt werden muss.
   
   Das klappt auch Reibungslos. Also das Einblenden und das Setzen des required Attributs. Nur wenn die Checkbox deaktiviert wird, soll ja auch das Feld wieder ausgeblendet werden. Was auch klappt, nur der Browser behält das required weiter bei, auch wenn ich das Attribut entferne.
   
   Mein javascript Code:
   
   

   function showTextBoxload(load_time_arrived) {
       if ( load_time_arrived.checked == true ) {
           document.getElementById("tboxload").style.display = "block";
           document.getElementById("load_time_arrived_input").setAttribute('required','required');
           document.getElementById("load_time_arrived_input").setAttribute('oninvalid',"this.setCustomValidity('You have to fill in the load arrived time in the fields below, if checkbox is activated')");
       } else {
           document.getElementById("tboxload").style.display = "none";
           document.getElementById("load_time_arrived_input").removeAttribute('required');
           document.getElementById("load_time_arrived_input").removeAttribute('oninvalid');
       }
   }

   
   
   Das ganze löse ich mit onclick aus.

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. matthias-detsch

   

   matthias-detsch hat kostenlosen Webspace.

   13:50, 19.9.2015

   Da habe ich 2 Ideen:
   1. ich glaube man kann das Attribut auch 'none' setzen
   2. Ein wenig aufwendiger, aber vlt gehts ja.
   Du könntest mit innerHTML das input feld an die entsprechende stelle schreiben und später auch wieder entfernen.
   
   

4. j*********r

   17:16, 19.9.2015

   Das Problem ist interessant... Hast du schon einmal versucht, vor bzw. nach removeAttribute() ein alert zu setzen, um zu sehen, ob das Skript an einer Stelle abbricht? Ansonsten würde ich mal mit dem Debugger (Firefox eignet sich sehr) herausfinden, ob du wirklich das richtige Element findest - das sollte aber eigentlich auch kein Problem darstellen. Das removeAttribute sollte mit getElementById eigentlich auch klappen... Wenn alles nicht klappt, handelt es sich wohl um einen Browser-Bug. Hast du schon einmal einen anderen Browser bzw. eine andere Browserversion ausprobiert?
   
   mfg
   Jonas
5. Autor dieses Themas

   all-in1

   

   all-in1 hat kostenlosen Webspace.

   17:55, 19.9.2015

   Das Problem tritt nur auf, wenn man die Checkbox aktiviert und das input Feld frei lässt und dann submit klickt. Also einmal auf invalid setzt.
   Nimmt jetzt den Haken raus, dann ist das input Feld weg auch die zuvor gesetzten Attribute sind weg. Nur der Browser hat immer noch das invalid drin.
   
   Ich nutze Firefox in der letzten stable Version.
   
   Die Konsole konnte ich noch nicht nutzen, ist ein Popup ohne Menüleiste. Die schalte ich mal ein und schaue mal.
   
   Edit: Laut Konsole sind keine javascript Fehler vorhanden.
   
   Also wie bringt man den Browser dazu, das invalid wieder zu löschen.
   
   Nach einem manuellen reload der Seite ist auch alles wieder in Ordnung, ist aber eigentlich nicht der Sinn der Sache.
   In Edge das gleiche, der eignet sich auch super zum debuggen.
   
   Beitrag zuletzt geändert: 19.9.2015 18:23:12 von all-in1

6. sfhdd

   sfhdd hat kostenlosen Webspace.

   19:24, 19.9.2015

   Laut http://stackoverflow.com/questions/7357192/how-to-clear-remove-or-reset-html5-form-validation-state-after-setcustomvalid müsste

   setCustomValidity("");

   helfen.
7. Autor dieses Themas

   all-in1

   

   all-in1 hat kostenlosen Webspace.

   23:50, 19.9.2015

   Sfhdd hat mir den richtigen Tipp gegeben.
   
   Man muss aber auch den Validation Check zurück setzen. Folgendes funktioniert dann prima:
   
   

   function showTextBoxload(load_time_arrived) {
       if ( load_time_arrived.checked == true ) {
           document.getElementById("tboxload").style.display = "block";
           document.getElementById("load_time_arrived_input").setAttribute('required','required');
           document.getElementById("load_time_arrived_input").setAttribute('oninvalid',"this.setCustomValidity('You have to fill in the load arrived time in the fields below, if checkbox is activated')");
       } else {
           document.getElementById("tboxload").style.display = "none";
           document.getElementById("load_time_arrived_input").removeAttribute('required');
           document.getElementById("load_time_arrived_input").removeAttribute('oninvalid');
           document.getElementById("load_time_arrived_input").setCustomValidity("");
           document.getElementById("load_time_arrived_input").checkValidity();
       }
   }

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?