Pflichfelder (persparams) für ältere Browser IE<9, Safari 5.1.7

Hallo,

ich habe folgendes Problem: die Templates, die ich mit dem Modul ppg_additionalparams betreibe, funktionieren eiwandfrei mit den neuen Browserversionen, die HTML5 unterstützen.

<td><label for="persistentParam">[{ oxmultilang ident="NPZ_FORMULAR_NAME" }]:</label></td><td><input value="[{ $oDetailsProduct->aPersistParam.text }]" size="30" id="persistentParam" name="persparam[Name]" required >[{ $oDetailsProduct->aPersistParam.text }]</td>	

Ich habe mehrere Versuche gemacht auch mit class=“js-oxValidate js-oxValidate_notEmpty”. Leider vergeblich :frowning:

Wie kann ich das Modul erweitern, so dass die übliche Shop-Klasse class=“js-oxValidate js-oxValidate_notEmpty” auch validiert wird?

Hat jemand Erfahrung damit? Danke für Ihre Antwort.

Gruß

Hallo,
leider habe ich persönlich keine Erfahrung damit.

Ich würde an deiner stelle mal genau schauen wie die Standard Formulare beim OXID Validiert wird, wie Preisalarm oder Kontaktformular.
Dementsprechend würde ich die von Dir genannten Klassen an die INPUT übergeben.

Außerdem kommt noch die IF Abfrage vor und bei Fehler blendest Du einfach “oxValidateError” Klasse ein.

Grüße
Rafig

Auf den ersten Blick:

id="persistentParam"

Dürfte in foreach einen Fehler verursachen. Entweder z.B. einen Counter ranhängen oder in eine Klasse umbenennen. Wie sieht denn das JS aus?

versuche mal so und gib Bescheid:


        [{assign var="_ps" value=$_ps+1}]
        <td><label for="persistentParam">[{ oxmultilang ident="NPZ_FORMULAR_NAME" }]:</label></td>
        <td>
        <input class="js-oxValidate js-oxValidate_notEmpty" value="[{ $oDetailsProduct->aPersistParam.text }]" size="30" id="persistentParam[{$_ps}]" name="persparam[Name]">[{ $oDetailsProduct->aPersistParam.text }]
        <p class="oxValidateError">
            <span class="js-oxError_notEmpty">[{ oxmultilang ident="ERROR_MESSAGE_INPUT_NOTALLFIELDS" }]</span>
        </p>
        </td>

Über den umschlißender [{foreach}] Schleife fügst du das hier ein (davor):


[{assign var="_ps" value="0"}]

Ich bin mir nicht sicher wo du Ihn einsetzt, aber schaue mal am besten im Quelltext nach ob die oxinputvalidator.js eingebunden ist, wenn nicht ganz oben im Template einfügen:


[{oxscript include="js/widgets/oxinputvalidator.js" priority=10 }]
[{oxscript add="$('form.js-oxValidate').oxInputValidator();"}]

und falls nicht schon vorhanden den umschließenden “form” folgender Klasse übergeben:


js-oxValidate

Grüße
Rafig

Danke Rafig und Fixodo für eure schnelle Antwort.

Dein Code, Rafig, funktioniert bei mir leider nicht. Es geht sogar in den HTML5-Browser (Firefox, etc.) nicht.
Ich habe versucht ein Pflichtfeld vom Kontaktformular bei mir zu implementieren und das wird auch nicht validiert.
Es sieht so aus, als ob das Modul die .js datei nicht einbindet, obwohl sie im Template ganz oben (wie beim Kontaktformular) steht.

[{oxscript include="js/widgets/oxinputvalidator.js" priority=10 }]
[{oxscript add="$('form.js-oxValidate').oxInputValidator();"}] 

Kann ich die Datei oxinputvalidator.js im metadata.php vom Modul ppg_additionalparams einbinden? Wie geht das?

Meine Templates liegen im Ordner
application\views\mein_theme pl\page\details\inc productmain1.tpl, productmain2.tpl, usw.
Übrigens dort habe ich keine foreach-Schleife. Wie soll sie aussehen?

@Fixodo - Warum soll die gleiche ID eine Fehlermeldung verursachen? Im Originaldatei (Github) haben auch 2 Felder die gleiche ID. Ich brauche die Infos, die ich Abfrage, eigentlich zusammen.

Gruß

[QUOTE=mmr;147646]
Übrigens dort habe ich keine foreach-Schleife. Wie soll sie aussehen?
@Fixodo - Warum soll die gleiche ID eine Fehlermeldung verursachen? Im Originaldatei (Github) haben auch 2 Felder die gleiche ID. Ich brauche die Infos, die ich Abfrage, eigentlich zusammen.[/QUOTE]

Ich würde Dir dringend raten, Grundlagen zu studieren. Eine ID hat nicht umsonst die Bezeichnung. ID bedeutet, sie darf nur einmal in einem Arbeitsbereich vorkommen. In einer foreach-Schleife, und diese ist sehr wohl vorhanden (steht doch oben), verursacht sowas natürlich Fehler, denn wenn Du in Jquery ein Feld mit z.B. #persistentParam ansprechend würdest, erwartet jQuery 1 (Ein) Feld und nicht 2.

Deswegen die Frage: Wie sieht das Script aus :wink:

Hi Foxido,

natürlich hast du Recht mit den IDs. Aber bei mir wird kein Fehler angezeigt. Und es hat mit dem Problem ältere Browser und Safari nichts zu tun.

Ich sehe 2 Möglichkeiten mein Problem zu lösen:

  1. oxinputvalidator.js zu erweitern so dass required auch validiert wird ( nicht die optimale Lösung meiner Meinung nach)

  2. eine andere .js einbiden, die required für die älter Browser z.B so in etwa:

 //This will execute when your page is loaded
    $(function(){
        //Required attribute fallback
        $('#formTemplate').submit(function() {
            if (!attributeSupported("required") || ($.browser.safari)) {
                   //If required attribute is not supported or browser is Safari (Safari thinks that it has this attribute, but it does not work), then check all fields that has required attribute
                   $("#formTemplate [required]").each(function(index) {
                         if (!$(this).val()) {
                               //If at least one required value is empty, then ask to fill all required fields.
                               alert("Please fill all required fields.");
                               return false;
                         }
                   });
            }
  return false; //This is a test form and I'm not going to submit it
        });
    });
    //This checks if a specific attribute is supported
    function attributeSupported(attribute) {
        return (attribute in document.createElement("input"));
    }

Was meinst du?

Gruß,
mmr

Wir haben Dich gar nicht gefragt nach was du die Formulare Validieren möchtest.

Wenn nur um die “Pflichtfelder” geht passt mein Kode von oben Prima und du musst oxinputvalidator.js überhaupt nicht anpassen.

Du schreibst immer wieder Alte und Neue Browser, eins musste man klären. Dein ursprüngliche Kode INPUT mit “required” wird ab HTML5 und vom Neueren Browser unterstützt. Die Validation vom OXID bezieht sich auch für die älteren Browser, deshalb fehlt auch “required” angabe in allen INPUT Feldern.

Ich würde vorschlagen das du meine Anleitung noch einmal durchgehst und uns einfach das Ergebnis als URL schickst um zu Prüfen ob alles OK ist.

Grüße
Rafig

Hi Rafig,

ja, es geht nur um die “Pflichfelder” und natürlich “required” (auch wenn es sehr bequem ist) bring nichts, weil viele noch IE8 und Safari benutzen.

Dein Code ist sehr gut und sollte theoretisch funktionieren, allerdings funktioniert bei mir nicht, weil meine Templates per Modul aktiviert sind.
Ich gehe noch mal deine Anleitung durch und schicke dir die Url, wenn es immer noch nicht geht.

Kannst du mir bei eine andere Sache helfen. Ich möchte ein „checkbox“ als Pflichfeld einfügen. Die ist beim Bankeinzug/Lastschrift. Die Kunden sollen bestätigen, dass das Geld von Ihrem Konto abgezogen wird.
Diesen Code funktioniert gut, weil es für type=“text” sich handelt:

<li [{if $iPayError == -6}]class="oxInValid"[{/if}]>
				
				<input class="js-oxValidate js-oxValidate_notEmpty"  name="dynvalue[ord_sepa]"  value="[{$value->value }] " >
				                <p class="oxValidateError">
                    <span class="js-oxError_notEmpty">[{ oxmultilang ident="ERROR_MESSAGE_INPUT_NOTALLFIELDS" }]</span>
                </p>				 </li>

Sobald ich nach <input type=“checkbox” einfüge, bleibt value leer value=" ". Wenn ich value=0 oder 1 statt [{$value->value }] im Code oben angebe, kann ich das Formular ohne zu bestätigen weiter senden, also ist kein Pflichtfeld mehr.
Gibt’s im oxvalidator.js eine passende Funktion für checkboxes? :confused:

Danke für eure Hilfe und Grüße

für diejenige, die das lesen und das gleiche Problem haben:

  • ich habe es anders gelöst. In den Templates die “required” benutzen, habe ich Modernizr-2.5.3.forms.js, html5Forms.js und webforms2_src.js + die .css dazu eingebunden. So funktionieren die “required” Felder in allen Browsern, sogar in Safari.