使用SASS进行HTML表单验证？

Question

我有一个表单,其中所有输入字段都有一个'required'和'pattern'参数.

我想在输入框的右侧显示一个绿色的小图片,只要输入无效,就向用户显示他已正确填充它.

我想知道它是否可以没有javascript/jquery,而不是纯css/sass？

我在想类似的东西

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

这有可能与sass,如果是这样,怎么样？:)

在此先感谢您的帮助!

Answer 1

Sass对文档或表单状态一无所知.你只需要使用CSS提供的东西:

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;
        }
    }
}