CODEWITHSUNDEEP
htmlcsssass
Bolli
Bolli

Reputation: 5274

HTML form validation with SASS?

I have a form where all the input fields has a 'required' and 'pattern' argument.

I would like to show a small green picture on the right of the inputbox, whenever the input is not invalid, to show the user he has filled it correctly.

Im wondering if its possible to do without javascript/jquery and instead with pure css/sass?

I was thinking something like

if input:invalid{
    .divonrightofinputbox{
    background:url('green.png');
    }
}else{
    .divonrightofinputbox{
    display:none;
    }
}

Is this possible with sass and if so, how? :)

Thanks in advance for any help!

Upvotes: 1

Views: 1178

Answers (1)

cimmanon
cimmanon

Reputation: 68319

Sass knows nothing about the document or the state of its forms. You just have to use what CSS offers:

input {
    &:required {
        + .div-after-the-input {
            // required styles
        }
    }

    &:invalid, &:out-of-range {
        + .div-after-the-input {
            background: url('invalid.png') no-repeat;
        }
    }

    &:valid, &:in-range {
        + .div-after-the-input {
            display: none;
        }
    }
}

Upvotes: 6

Related Questions