Custom Validation berichten

[Verwijderd]

Hi,

(Dit topic is gerelateerd aan mijn vorige topic "Wordpress comment formulier met browser validation" welke al is afgesloten)

Helaas loop ik nog vast tegen het stukje hoe ik de default tekst van de pop-up berichten kan veranderen in mijn Wordpress comment form. Terwijl ik op het internet allemaal oplossingen lees lukt het mij niet om een dergelijke oplossing goed te implementeren in mijn functions.php dus zou ik jullie hulp nog een laatste maal willen vragen.

Wat ik tot nu toe heb gebruikt om de tekst te veranderen zijn onderstaande twee codes (beide zijn afzonderlijk van elkaar getest):

code:

<?php
var email = document.getElementById("email");

email.addEventListener("input", function (event) {
  if (email.validity.typeMismatch) {
    email.setCustomValidity("custom message can be typed here");
  } else {
    email.setCustomValidity("");
  }
});
?>

En:

code:

<?php
var email = document.querySelector('input[name="email"]');
email.setCustomValidity('Need your email bro!');

email.addEventListener('input', function () {
  // Note: if (this.checkValidity()) won't work
  // as setCustomValidity('with a message') will set
  // the field as invalid.
  if (this.value.trim() === '') {
    this.setCustomValidity('Need your email bro!');
  }
  else {
    this.setCustomValidity('');
  }
}, false);
?>

Beide voorbeelden heb ik in mijn functions.php geplaatst waarbij ik de input name en/of id verander naar: -
- "author" (voor het naam veld)
- "email" (voor het email veld zoals in bovengenoemde voorbeelden)
- "comment" voor het comment veld.

Alle opties resulteren in een HTTP error 500...

Jquery gerelateerde items vind ik erg lastig. Daarom is alle hulp welkom; gelukkig is dit voor mij het laatste wat aangepast hoeft te worden op het gebied van .php en jquery.

Bedankt alvast.

[endness]

Je schrijft javascriptcode tussen <?php en ?>, dat gaat niet werken. Probeer het eens met <script> tags.

[418O2]

Kan je de input geen required en type='email' geven? volgens mij ben je er dan al

[Josk79]

Je code is javascript, niet php. Daarom krijg je een 500 error. Je kunt op diverse manieren javascript toevoegen vanuit functions.php, zie https://www.wpexplorer.com/javascript-wordpress/ .

[Verwijderd]

418O2 schreef op maandag 7 mei 2018 @ 17:39:
Kan je de input geen required en type='email' geven? volgens mij ben je er dan al

Werkt helaas niet...

Wat ik tot nu toe heb is het volgende:

code:

<script type="text/javascript">
var email = document.getElementById("email");

email.addEventListener("input", function (event) {
  if (email.validity.typeMismatch) {
    email.setCustomValidity("custom message can be typed here");
  } else {
    email.setCustomValidity("");
  }
});
</script>

Resultaat is dat de HTTP error 500 is verdwenen maar er alsnog niks aan het pop-up bericht van in dit geval het email veld veranderd. Als ik de pagina inspecteer staat de volgende error er:

(index):27 Uncaught TypeError: Cannot read property 'addEventListener' of null
at (index):27

[418O2]

Dit zijn echt basis fouten. Je zoekt een HTML element met het id email in de pagina en die is er niet.

Mogelijk is die er wel, maar voer je je JavaScript te vroeg uit, dan moet je er een eventlistener gebruiken voor wanneer de dom klaar is


document.addEventListener("DOMContentLoaded", function() {
// code...
});

[DJMaze]

@418O2 of er zijn twee input velden met het id "email". Dat werkt natuurlijk ook niet of wel

[ Voor 9% gewijzigd door DJMaze op 08-05-2018 20:15 ]

[b2vjfvj75gjx7]

JavaScript:

var check = document.getElementById("check");
var email = document.getElementById("email");

check.addEventListener("click", function (e) {

  try {

    if (email.validity.typeMismatch) {

      email.setCustomValidity("custom message can be typed here");

    } else {

      email.setCustomValidity("");

    }

  } catch(err) {

    alert(err.message);

  }

});

Wat ook kan helpen is als je de fout even afvangt via een try/catch constructie.

Fiddle - https://jsfiddle.net/r1jv5nxx/

Als je in die Fiddle op de button klikt, zie je meteen wat er (expres) fout gaat...

[Verwijderd]

Bedankt allemaal!