Menu icon Foundation
Remove Abide error message

I have a donation form with Abide validation. The donation amount field is required, but it can also be pre-filled by clicking one of the suggested donation amount buttons. However this does not trigger Abide, so if an error has already been flagged for the amount field it is not cleared.

For example, if I click in the amount field and then click away without entering an amount, the required error shows (as it should). If I then click on one of the suggested amount buttons, this enters a value into the amount field but does not clear the Abide required error message. I need to figure out how to clear that message when the value has been entered via javascript.

Is there an easy way to do this? So far I haven't stumbled upon it. My code is below.

Thanks in advance for your help!

    $( ".amt" ).click(function() {
	  var amt = $( this ).text().replace("$", "");
	  $( "#amount" ).val( amt );
      $( "#amount" ).removeAttr("data-invalid"); // <- this does not remove the error message
	  setButtonText();
	});

abide

I have a donation form with Abide validation. The donation amount field is required, but it can also be pre-filled by clicking one of the suggested donation amount buttons. However this does not trigger Abide, so if an error has already been flagged for the amount field it is not cleared.

For example, if I click in the amount field and then click away without entering an amount, the required error shows (as it should). If I then click on one of the suggested amount buttons, this enters a value into the amount field but does not clear the Abide required error message. I need to figure out how to clear that message when the value has been entered via javascript.

Is there an easy way to do this? So far I haven't stumbled upon it. My code is below.

Thanks in advance for your help!

    $( ".amt" ).click(function() {
	  var amt = $( this ).text().replace("$", "");
	  $( "#amount" ).val( amt );
      $( "#amount" ).removeAttr("data-invalid"); // <- this does not remove the error message
	  setButtonText();
	});
Droideka over 5 years ago

Post the html with the jquery please. We cannot help you with that...

Marissa Cookson about 5 years ago

Add a class to your amount field error such as .amount-error:

<small class="error amount-error">Please Enter an Amount.</small>

Then inside your .amt click function, hide the abide error with:

$('.amount-error').hide();