Form-Validierung im Frontend funktioniert nicht: null is not an object

Aligator13 · 7. Mai 2016

Hallo zusammen,

in Anlehnung an die Ratschläge, die mir in einem anderen Thread gemacht wurden, habe ich nunmehr eine Form gebaut, die beim Klick auf einen Submit-Button abgesendet werden soll.

In dieser View ist folgendes eingebunden:

Code

JHtml::_('behavior.formvalidator');JHtml::_('jquery.framework');

Folgendes JS-Snippet ist zudem eingebunden:

PHP

<script type="text/javascript">    Joomla.submitbutton = function(task)    {        if (task == 'item.cancel')         {            Joomla.submitform(task, document.getElementById('save'));        }        else         {                if (task != 'item.cancel' && document.formvalidator.isValid(document.id('save'))) {                Joomla.submitform(task, document.getElementById('save'));            }            else             {                alert('<?php echo $this->escape(JText::_('JGLOBAL_VALIDATION_FORM_FAILED')); ?>');            }        }    }</script>

Die Form selbst hat folgende Beschreibung:

PHP

<form name="item-form" id="save" class="form-validate" action="<?php echo JRoute::_('index.php?option=com_bestia'); ?>" method="post" >

Wenn ich nun allerdings versuche, die Form zu speichern, ohne alle benötigten Felder auszufüllen oder validation-Regeln breche ("123" in ein Feld mit einer E-Mail-Validierung), so wird die Form leider normal abgeschickt und ich erhalte in dem kurzen Moment nach dem Klick auf den Button, bevor die Seite neu geladen hat, folgende Hinweise in der Fehlerkonsole des Browsers:

Meine Frage lautet daher: Was mache ich falsch? Ich habe versucht, die Joomla-Dokumentation zu befolgen, allerdings habe ich hier scheinbar doch etwas übersehen.

Auch bei der Server-seitigen Validierung musste ich einige Umwege gehen, aber dazu später mehr, ggf. dann, wenn dieses Problem hier gelöst ist ;-).

LG & ein sonniges Wochenende!

Re:Later · 7. Mai 2016

Hast du einen DIV oder anderen HTML-Container mit id="system-message-container" auf/in der Seite mit dem Formular?

Die unminifizierte Stelle lautet (Zeile 10 wirft den Fehler):

Code

/**
  * Remove messages
  *
  * @return  void
  */
 Joomla.removeMessages = function() {
  var messageContainer = document.getElementById( 'system-message-container' );


  // Empty container with a while for Chrome performance issues
  while ( messageContainer.firstChild ) messageContainer.removeChild( messageContainer.firstChild );


  // Fix Chrome bug not updating element height
  messageContainer.style.display = 'none';
  messageContainer.offsetHeight;
  messageContainer.style.display = '';
 };

Alles anzeigen

firstlady · 7. Mai 2016

Hast du das nur für uns hier so eingefügt oder ist das dein code?

PHP

alert('<?php echo $this->escape(JText::_('JGLOBAL_VALIDATION_FORM_FAILED')); ?>');

Aligator13 · 7. Mai 2016

Zitat von Re:Later

Hast du einen DIV oder anderen HTML-Container mit id="system-message-container" auf/in der Seite mit dem Formular?

Tatsächlich scheint das Template das nicht anzubieten. Oder muss ich das in der Komponente selbst zur Verfügung stellen?

Zitat von firstlady
Hast du das nur für uns hier so eingefügt oder ist das dein code?
PHP
alert('<?php echo $this->escape(JText::_('JGLOBAL_VALIDATION_FORM_FAILED')); ?>');

Das war eigentlich für mich als Test gedacht - ist das grob falsch?

Re:Later · 7. Mai 2016

Zitat von ehrenwert

Tatsächlich scheint das Template das nicht anzubieten. Oder muss ich das in der Komponente selbst zur Verfügung stellen?

In Templates findet man normalerweise dies:

Code

<jdoc:include type="message" />

woraus Joomla dann generiert:

Code

<div id="system-message-container"></div>

mal mit, mal ohne Inhalt...

Aligator13 · 7. Mai 2016

Vielen Dank für die schnelle Rückmeldung!

Ich habe nun

Code

<jdoc:include type="message" />

in meine Komponente eingefügt - im gerenderten Quelltext der Seite findet man dies auch nun. Der Fehler tritt dann allerdings weiter auf.

Erst wenn ich

Code

<div id="system-message-container"></div>

eingebe funktioniert es.

Wo ist denn nun eigentlich der Unterschied zwischen den beiden Möglichkeiten?

Re:Later · 7. Mai 2016

Zitat von ehrenwert

<jdoc:include type="message" /> in meine Komponente eingefügt

Das ist vorbehalten für index.php des Templates. Sonst wird ja nicht "umgewandelt".

Zitat von ehrenwert

Wo ist denn nun eigentlich der Unterschied zwischen den beiden Möglichkeiten?

Zweitere ist nur für JavaScript "erreichbar".

Erstere rendert PHP-Meldungen mit, die Joomla dann gleich mit ausgibt, falls welche vorliegen. Das berühmte

Code

$app->enqueueMessage('tralala', 'error');

wird bspw. in diesem Container mitgerendert/ausgegeben.

Re:Later · 7. Mai 2016

Die relevanten Dateien:

libraries/joomla/renderer/html/message.php
Hier werden die gesammelten PHP-Messages zusammengefasst. Vielleicht kannst selber was draus schnitzen.
Ruft dann folgendes JLayout auf per

Code

return JLayoutHelper::render('joomla.system.message', $displayData);

wo dann der Container generiert wird:
layouts/joomla/system/message.php

(Vorausgesetzt Template arbeitet nicht mit veralteter, eigener html/message.php Kannte ich noch nicht mal vor Deprecated-Entdeckung gerade.)

Aligator13 · 7. Mai 2016

Naja, ich habe mal den Template-Entwickler angeschrieben. Vielleicht wird das ja noch nachgerüstet, denn gerade auch die Enqueue-Messages werden ja auch für fehlerhafte Login-Versuche etc. pp. genutzt, oder irre ich mich da?

Was mich wundert: Ich gebe in meiner Form-Beschreibung z.B.

Code

validate = "numeric"

an - und dennoch erscheint nur ein Fehler, wenn das Feld leer bleibt - nicht aber, wenn ich "abcd" in dieses Feld schreibe.

Re:Later · 8. Mai 2016

Zitat von ehrenwert

Naja, ich habe mal den Template-Entwickler angeschrieben. Vielleicht wird das ja noch nachgerüstet, denn gerade auch die Enqueue-Messages werden ja auch für fehlerhafte Login-Versuche etc. pp. genutzt, oder irre ich mich da?

Nein, du irrst dich nicht.
Rüste halt selber nach. Musst ja nur den Schnipsel in die index.php an Wunschstelle einsetzen. Siehe Protostar. Über component meist richtig.

Zitat

validate = "numeric"

Probiers mal mit

Code

class="validate-numeric"

Hab aber das Joomla-Validierungs-Durcheinander nie richtig verstanden und was nun veraltet ist oder neu und warum etc.