.l-text-input-container and .c-error-message created

adding an error message to the input fields
u-dani · Jan 27, 2024 · 3740d11 · 3740d11
1 parent ad30059
commit 3740d11
Showing 1 changed file with 11 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -16,17 +16,21 @@
         <form class="l-form">
             <h1 class="c-title">Fazer login</h1>
             <fieldset class="l-credential-container">
-                <label for="iuser" class="c-text-input-field">
-                    <span>NOME DE USUÁRIO</span>
-                    <input type="text" name="username" id="iuser" placeholder="" autocomplete="username" required />
-                    <div>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <div class="l-text-input-container">
+                    <label for="iuser" class="c-text-input-field">
+                        <span>NOME DE USUÁRIO</span>
+                        <input type="text" name="username" id="iuser" placeholder="" autocomplete="username" required />
+                    </label>
+
+                    <div class="c-error-message">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                             <path d="M6.95.435c.58-.58 1.52-.58 2.1 0l6.515 6.516c.58.58.58 1.519 0 2.098L9.05 15.565c-.58.58-1.519.58-2.098 0L.435 9.05a1.48 1.48 0 0 1 0-2.098zm1.4.7a.495.495 0 0 0-.7 0L1.134 7.65a.495.495 0 0 0 0 .7l6.516 6.516a.495.495 0 0 0 .7 0l6.516-6.516a.495.495 0 0 0 0-.7L8.35 1.134z"/>
                             <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>
                           </svg>
-                        <span class="error-message js-error-message">mensage</span>
+                        <span class="js-error-message">Deve ter pelo menos 2 caracteres</span>
                     </div>
-                </label>
+                </div>
+
                 <label for="ipassword" class="c-text-input-field">
                     <span>SENHA</span>
                     <input type="password" name="password" id="ipassword" placeholder="" autocomplete="current-password" required />