Play sound on required field error.

How to play a sound on a required field error in ChronoForms.

Overview

The issue occurs when a form submission fails validation, and a user wants an audible alert.
Add a custom data attribute to the form tag to trigger a JavaScript function on validation failure, then include a Load Javascript action that defines the function to play a specified sound file.

Answered
Jo Johnsson 31 May, 2015
Hi!

How can I play a sound, e.g. by <audio> tag, on required field error (incomplete or something) when user clicks "Submit" button? I think I have to add some code in display_errors.php? But, what kind of code? Can anyone help me?

P.S. Sorry for my terrible English.
Gr GreyHead 07 Jun, 2015
Answer
Hi Johnsson,

a. In the Setup tab open the HTML (Render form) action settings and add this to the Form tag attachment box:
data-gvalidate_fail='playSound'


b. Drag a Load Javascript action in to the form ON Load event before the HTML (Render form) action and add this code:
function playSound() {
  var sound = '/components/com_chronoforms5/extras/sounds/beep1.mp3';
  var embed = "<embed src='"+sound+"' hidden='true' autostart='true' loop='false'  class='playSound' />
<audio autoplay='autoplay' style='display:none;' controls='controls'><source src='"+sound+"' /></audio>";
  jQuery('body').append(embed);
}
Edit the code to change the sound to have the location of your sound file.

This works OK for me with an mp3 sound file.

You can similarly add an beep on a successful validation using
data-gvalidate_success='playSound'


Bob
This topic is locked and no more replies can be posted.