使用SASS進行HTML表單驗證？

Question

我有一個表單，其中所有的輸入字段都有'required'和'pattern'參數。

我想在輸入框的右側顯示一個綠色的小圖片，只要輸入無效，就可以向用戶顯示正確填寫的內容。

我想知道如果沒有JavaScript/jQuery，而不是純CSS/sass可以做？

我想這樣

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

這是可能的青菜如果是這樣，怎麼樣？ :)

在此先感謝您的幫助！

Answer 1

薩斯對文件或其形式的狀態一無所知。你只需要使用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; 
     } 
    } 
}