Stronę tą wyświetlono już: 130 razy
W ramach komponentów stworzonych z myślą użycia ich na stronie stworzyłem serię wrapperów, mających na celu ułatwienie mi życia. Oto przykład formularza wykorzystującego owe komponenty.
Kod realizujący powyższe zadania:
<form class="form-example">
<obl-input-wrapper label="Text wrapper example">
<input name="text1" minlength="3" maxlength="10" required/>
</obl-input-wrapper>
<obl-input-wrapper label="Number wrapper example">
<input type="number" name="number" min="10" max="20" required/>
</obl-input-wrapper>
<obl-input-wrapper label="Textarea wrapper example">
<textarea name="text1" minlength="3" maxlength="10" required></textarea>
</obl-input-wrapper>
<obl-radio-group name="health" label="Health points" required="Must select one option">
<obl-input-wrapper label="100pt">
<input type="radio" value="100pt"/>
</obl-input-wrapper>
<obl-input-wrapper label="200pt">
<input type="radio" value="200pt"/>
</obl-input-wrapper>
<obl-input-wrapper label="300pt">
<input type="radio" value="300pt"/>
</obl-input-wrapper>
</obl-radio-group>
<obl-input-wrapper class="rodo" label="RODO required to confirm">
<input type="checkbox"/>
</obl-input-wrapper>
<obl-button-wrapper style="margin: 5px 0 0 2px">
<button>Wyślij</button>
</obl-button-wrapper>
</form>
<script>
const form = document.querySelector('form.form-example');
const rodo = form.querySelector('.rodo');
rodo.validators = [
(value) => {
return value == 'false' ? 'You have to agree' : ''
}
]
</script>