CODEWITHSUNDEEP
javascriptjquery
Ken
Ken

Reputation: 57

Display Div When JS Validation Fails

I'm trying to display a div when a certain validation fails.

The div is more of a general error message above our "Place Order" button, like so:

<div id="generalerror" class="validation-advice" style="display:none;">Looks Like Your Payment Method Is Invalid. Please Review Your Information</div>

In the javascript portion of validation, I tried to add a line:

      if (this.paymentMethodAdvice && this.paymentMethodWrapper) {
            if (!formData[this.paymentMethodName]) {
                paymentValidation = false;
                $('#generalerror').show(); // This Line
                this.paymentMethodAdvice.update(this.paymentValidationMessage).show();
                this.paymentMethodWrapper.addClassName('validation-failed');
            } else {
                paymentValidation = true;
                this.paymentMethodAdvice.update('').hide();
                this.paymentMethodWrapper.removeClassName('validation-failed');
            }
        }

Obviously, that didn't work. Anyone know how I might get this to happen correctly?

Upvotes: 1

Views: 105

Answers (1)

Murad Hasan
Murad Hasan

Reputation: 9583

If you want to show any css from jQuery then use .css like i do.

if (this.paymentMethodAdvice && this.paymentMethodWrapper) {
  if (!formData[this.paymentMethodName]) {
    paymentValidation = false;
    $('#generalerror').css({ "display" : "block" }); //Updated Line
    this.paymentMethodAdvice.update(this.paymentValidationMessage).show();
    this.paymentMethodWrapper.addClassName('validation-failed');
  } else {
    paymentValidation = true;
    this.paymentMethodAdvice.update('').hide();
    this.paymentMethodWrapper.removeClassName('validation-failed');
  }
}

General example what i did, fiddle link

Upvotes: 1

Related Questions