All comments

• 

  Kacper• 180

  @kacper-reiman

  Submitted almost 2 years ago

  I couldn't figure out how to prevent user from submitting without having rating selected, but I didn't know how to check if rating button is not clicked and display an alert message. Tried also to check if :focus on any button is active and if not, then display an alert, but I couldn't reach it in JS. My next idea was to change buttons into radio inputs, hide them and catch their labels as buttons, but I think a label can't have an active state like :focus so I gave up. Any ideas how to solve the problem? Also any other feedback and advice would be highly appreciated.

  

  Interactive rating component

  6

  40

  

  Thomas• 50

  @thomaspaysac

  Posted almost 2 years ago

  Hi Kacper,

  The simplest solution I found was to add the "disabled" attribute to the submit button, make it unclickable using pointer-events: none; in CSS while disabled, and then make the JavaScript remove the disabled attribute using a simple for loop so that when any rating is chosen the disabled attribute is removed :

    userRatingChoice[i].addEventListener('click', function() {
      SUBMIT_BUTTON.removeAttribute('disabled');;
    })
  }
  

  Marked as helpful

  0