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

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

Block invalid

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

Block valid

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

Required Input

Loading Disabled

---

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

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>

Always show error

❌ Text error

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

Checkbox

Checkbox

❌ Text error

✅ Text success

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

INFO

- sf-description not work

Select

option 1 option 2 option 3 option 4

❌ 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>

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>

Switch

Some text

❌ Text error

✅ Text success

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

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>

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.