Probleme mit Error-messages

[HerKaen]

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:

{% 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:

<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]

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

[HerKaen]

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]

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

[COLOR=#9876aa][I]<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>[/I][/COLOR]

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.

[COLOR=#9876aa][I]<[/I][/COLOR][COLOR=#e8bf6a]script[/COLOR][COLOR=#9876aa][I]>
    [/I][/COLOR]$[COLOR=#9876aa][I]([/I][/COLOR]document[COLOR=#9876aa][I])[/I][/COLOR].ready[COLOR=#9876aa][I]([/I][/COLOR][COLOR=#cc7832][B]function [/B][/COLOR][COLOR=#9876aa][I]() {
       [/I][/COLOR]$[COLOR=#9876aa][I]([/I][/COLOR][COLOR=#6a8759]'#accept[/COLOR][COLOR=#9876aa][I]')[/I][/COLOR].[COLOR=#ffc66d]click[/COLOR][COLOR=#9876aa][I]([/I][/COLOR][COLOR=#cc7832][B]function[/B][/COLOR][COLOR=#9876aa][I](){
          [/I][/COLOR][COLOR=#cc7832][B]if [/B][/COLOR][COLOR=#9876aa][I]([/I][/COLOR]document.[COLOR=#ffc66d]getElementById[/COLOR][COLOR=#9876aa][I]([/I][/COLOR][COLOR=#6a8759]"ruleId2"[/COLOR][COLOR=#9876aa][I])[/I][/COLOR].[COLOR=#9876aa]checked [/COLOR]== [COLOR=#cc7832][B]true[/B][/COLOR][COLOR=#9876aa][I]) {[/I][/COLOR][COLOR=#cc7832]
            [/COLOR]$[COLOR=#9876aa][I]([/I][/COLOR][COLOR=#6a8759]"#ruleId1[/COLOR][COLOR=#9876aa][I]")[/I][/COLOR].[COLOR=#ffc66d]removeAttr[/COLOR][COLOR=#9876aa][I]([/I][/COLOR][COLOR=#6a8759]'oninvalid'[/COLOR][COLOR=#9876aa][I])[/I][/COLOR][COLOR=#cc7832];
            [/COLOR]$[COLOR=#9876aa][I]([/I][/COLOR][COLOR=#6a8759]"#ruleId1[/COLOR][COLOR=#9876aa][I]")[/I][/COLOR].[COLOR=#ffc66d]removeAttr[/COLOR][COLOR=#9876aa][I]([/I][/COLOR][COLOR=#6a8759]'oninput'[/COLOR][COLOR=#9876aa][I])[/I][/COLOR][COLOR=#cc7832];[/COLOR]
            [COLOR=#cc7832]$[COLOR=#9876aa][I]([/I][/COLOR][COLOR=#6a8759]"[COLOR=#9876aa][I]form-check-input[/I][/COLOR][/COLOR][COLOR=#9876aa][I]")[/I][/COLOR].[COLOR=#9876aa][I]prop([/I][/COLOR][COLOR=#6a8759]'[COLOR=#cc7832]required', false);[/COLOR][/COLOR][/COLOR]
[COLOR=#9876aa][I]}[/I][/COLOR]

[COLOR=#9876aa][I]})[/I][/COLOR][COLOR=#cc7832];
   [/COLOR][COLOR=#9876aa][I]})[/I][/COLOR][COLOR=#cc7832];
[/COLOR][COLOR=#9876aa][I]</[/I][/COLOR][COLOR=#e8bf6a]script[/COLOR][COLOR=#9876aa][I]>[/I][/COLOR]

[h3ll]

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]

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:

    

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

validate.js:

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]

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