Play sound on required field error.

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

Forums

Play sound on required field error.