PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr (https://www.php-resource.de/forum/)
-   HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/)
-   -   Probleme mit Error-messages (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/106249-probleme-mit-error-messages.html)

HerKaen 21-06-2018 16:28

Probleme mit Error-messages
 
Schönen guten Tag.


Ich schlage mich jetzt schon seit ein paar Tagen mit diesem Problem rum, ich hoffe mir kann jemand weiterhelfen.
Undzwar generiere ich RadioButtons über eine Schleife und diese sind auch required, was ja nicht das Problem ist.
Das Problem entsteht erst dadurch das ich eine eigene invalide-message haben möchte,
wenn es sich um einen Browser mit englischer Spracheinstellung handelt.


Ich habe das ganze mit oninvalid versucht zu lösen, aber dann macht er Probleme.
Wenn ich dann nämlich einmal auf Absenden drücke ohne was ausgewählt zu haben, kommt die gewollte Error-Message.
Allerdings kann muss ich danach jeden Button anklicken oder zumindest einmal den, der das oninvalid hat bevor ich
das Formular abschicken kann. Vielleicht hat ja jemand eine bessere Idee oder kann mir sagen was ich falsch mache.


Hier mein HTML bzw. Twig Code:
Code:

{% for option in rule.optionMap %}
    <div class="form-check">
        <input class="form-check-input" type="radio" name="rule" id="ruleId" value="Identifier"

  oninvalid="this.setCustomValidity('Please fill out this field.')" oninput="setCustomValidity('')" required>
 
      <label class="form-check-label" for="ruleId">
          text
      </label>
  </div>
{% endfor %}

Und hier mein Versuch mit JavaScript:
Code:

<script>
    $(document).ready(function()
      {
          if (document.getElementById("ruleId").checked == true)
            {
                $(".form-check-input").prop("required", false);
                var ret = "oninvalid=\"this.setCustomValidity('Please fill out this field.')\" oninput=\"setCustomValidity('')\"";
              var replaced = ret.replace(ret, "");
            }
        });
</script>

Gruß Nico

h3ll 21-06-2018 16:52

JavaScript-Code hat in HTML-Code nichts verloren. Den schreibst du am besten nur in JavaScript-Dateien.

HerKaen 22-06-2018 08:02

Zitat:

Zitat von h3ll (Beitrag 674735)
JavaScript-Code hat in HTML-Code nichts verloren. Den schreibst du am besten nur in JavaScript-Dateien.


Auslagern kann ich es nachher immer noch, es soll aber erstmal funktionieren. Und ich kriege dieses "oninvalid"...." einfach nicht weg wenn wenn einer der RadioButtons angeklickt wurde.

HerKaen 22-06-2018 09:50

Ich hab mir um es einfacher darzustellen mal eine kleine Datei erstellt.


Code:

<form method="post" id="Form">
    <div class="form-check">
        <input class="form-check-input" type="radio" name="rule" id="ruleId1" value="AAA" required oninvalid="this.setCustomValidity('Please fill out this field.')" oninput="setCustomValidity('')">

        <input class="form-check-input" type="radio" name="rule" id="ruleId2" value="BBB" required>

        <input class="form-check-input" type="radio" name="rule" id="ruleId3" value="CCC" required>

        <button type="submit" name="wish" value="accept" id="accept">Button</button>
        <button type="reset" name="decline" value="reset" id="reset">Reset</button>
    </div>
</form>

Hab es jetzt hinbekommen das das oninvalid und auch die required verschwinden sobald der 2. RadioButton gechecked wurde und der Button gedrückt. Aber meine eigene Fehlermeldung wird trotzdem noch angezeigt und ich kann das Formular so halt auch immer noch nicht absenden.


Code:

<script>
   
$(document).ready(function () {
     
$('#accept').click(function(){
         
if (document.getElementById("ruleId2").checked == true) {
           
$("#ruleId1").removeAttr('oninvalid');
           
$("#ruleId1").removeAttr('oninput');
            $("form-check-input").prop('required', false);
}

});
 
});
</script>


h3ll 22-06-2018 10:09

Zitat:

Zitat von HerKaen (Beitrag 674737)
Auslagern kann ich es nachher immer noch

Nein, damit es übersichtlicher wird, solltest du es sofort machen. Wenn es mal "funktioniert", ist es irrelevant, dann kannst du dir das "Auslagern" sparen. Man arbeitet JETZT mit dem Code, also sollte es JETZT auch brauchbar aufgegliedert sein.

HerKaen 06-07-2018 13:54

Also einiges habe ich nun ausgelagert, eine Funktion bekomme ich aber nicht ausgelagert. In meiner Template Datei funktioniert der Code, aber wenn ich diesen in eine extra Datei schreibe und diese Funktion in meinem Template dann benutzen möchte geht es nicht mehr.


token.html.twig:
Code:

   

<script language="javascript" type="text/javascript" src="/js/validate.js"></script>

validate.js:
Code:

function myFunction2() {
    $(document).ready(function () {
        $('input[name="rule[{{ rule.identifier|e }}]"]').on({
            invalid: function (e) {
                e.target.setCustomValidity("");
                if (!e.target.validity.valid) {
                    e.target.setCustomValidity("{{ rule.getRequiredAttributeValidation(meta.language)|raw }}");
                }
            },
            input: function (e) {
                e.target.setCustomValidity("");
            }
        });
    });
}

Mit anderen Funktionen läuft es, nur mit dieser irgendwie nicht.

Gruß Nico

basti1012 10-07-2018 05:58

Wird in deiner tocken html überhaupt die funktion myFunction2() aufgerufen? Weil da kann ich jetzt nix von sehen. Hast du das schon Online ? Dann gib uns doch mal ein Link dann kann man den Fehler auch besser finden.Oder wenn möglich ganzen ode posten ,aber nur wenn er nicht zu lang ist


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:20 Uhr.

Powered by vBulletin® Version 3.8.2 (Deutsch)
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.3.0
[c] ebiz-consult GmbH & Co. KG