Skip to content

Validate

This section provides examples of input elements with validation that can be used in HTML forms. Each example includes the HTML code and styling using various classes such as sf-input, sf-checkbox, sf-select, sf-textarea, and sf-switch.

There are three additional classes: sf-description, sf-invalid, and sf-valid. These classes are effective when the element is given the validates class.

Block description

html
<div class="sf-description">Text description</div>

Block invalid

html
<div class="sf-invalid">❌ Text error</div>

Block valid

html
<div class="sf-valid">✅ Text success</div>

Required Input





<input class="sf-input validates" placeholder="Required Input" required />
html

Input with Pattern

Text description
❌ Text error

<input class="sf-input validates" placeholder="Pattern Input" pattern="\w{3,16}" />
<div class="sf-description">Text description</div>
<div class="sf-invalid">❌ Text error</div>
html

Always show error

❌ Text error

<input class="sf-input error" placeholder="text" />
<div class="sf-invalid">❌ Text error</div>
html

Checkbox


<label class="sf-checkbox validates">
  <input type="checkbox" required /> <span>Checkbox</span>
  <div class="sf-invalid">❌ Text error</div>
  <div class="sf-valid">✅ Text success</div>
</label>
html

INFO

- sf-description not work

Select

❌ Text error
✅ Text success

<select :class="ldgSelect" multiple required">
  <option value="option 1">option 1</option>
  <option value="option 2">option 2</option>
  <option value="option 3">option 3</option>
  <option value="option 4">option 4</option>
</select>
<div class="sf-invalid">❌ Text error</div>
<div class="sf-valid">✅ Text success</div>
html

INFO

- Only multiple
- sf-description not work

Textarea

Text description
❌ Text error
✅ Text success

<textarea class="sf-textarea validates" placeholder="textarea" required></textarea>
<div class="sf-description">Text description</div>
<div class="sf-invalid">❌ Text error</div>
<div class="sf-valid">✅ Text success</div>
html

Switch


<label class="sf-switch validates">
  <input type="checkbox" required /> <span>Some text</span>
  <div class="sf-invalid">❌ Text error</div>
  <div class="sf-valid">✅ Text success</div>
</label>
html

INFO

- sf-description not work

Auth form validate

Here is an example showing that a form can be assigned the class validates, and the type="submit" button will be inactive until all conditions are met.

Text description
❌ Text error
✅ Text success
Text description
❌ Text error
✅ Text success

<form class="d:f validates" action="#">
  <fieldset class="d:f:y shift">
    <div class="d:f:x auto wrap">
      <div>
        <input class="sf-input validates" type="email" placeholder="email" pattern="\w+@\w+\.\w{2,}" required />
        <div class="sf-description">Text description</div>
        <div class="sf-invalid">❌ Text error</div>
        <div class="sf-valid">✅ Text success</div>
      </div>
      <div>
        <input class="sf-input validates" type="password" placeholder="password" pattern="\w{3,16}" required autocomplete="off" />
        <div class="sf-description">Text description</div>
        <div class="sf-invalid">❌ Text error</div>
        <div class="sf-valid">✅ Text success</div>
      </div>
    </div>
    <div class="shift right">
      <button class="sf-button" type="submit">Login</button>
    </div>
  </fieldset>
</form>
html

Conclusion

Using these examples, you can create forms with input elements that have validation. All elements are styled using the sf-input class for a consistent look and feel.

Released under the MIT License