Why doesn't scss work with input:invalid?

Question

css

#form-registry input:invalid  .button {
    pointer-events: none;
}
#form-registry input:invalid + .button {
    pointer-events: none;
}
#form-registry input:invalid  {
    .button {
         pointer-events: none;
    }
}
#form-registry input:invalid  {
    &.button {
         pointer-events: none;
    }
}

None of the designs work. But if done through

@if (#form-registry input:invalid) {
    .button {
        pointer-events: none; // в этом случаем кнопка отключается
    }
} @else {
    .button {
        pointer-events: all; // но это условие уже не работает
    }
}

I can't disable the captcha call button before passing the input validation (the submit is already hanging on the button of the captcha modal itself)
why doesn't scss work? maybe because scss compiles to css? project on laravel blade.php

Answer 1

#form-registry input:invalid .buttonis a meaningless selector. Input cannot contain other elements within itself.

#form-registry input:invalid  {
    .button {
         pointer-events: none;
    }
}

This is the same

#form-registry input:invalid  {
    &.button {
         pointer-events: none;
    }
}

Here you either do not understand what you are doing, or xs. This code will make the input itself transparent to the pointer if the field is filled in incorrectly and has a button class
#form-registry input:invalid + .button
. Here is something meaningful. If the button is located immediately after the input, then it will become transparent for the pointer if the field is filled incorrectly.
The design with the if is also crazy.