<div class="mb-3">
    <label class="form-label">Nombre</label>
    <input type="text" class="form-control" name="nombre" id="nombre"
           data-validate="required,min-length" data-min-length="3">
</div>

<div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control" name="email" id="email"
           data-validate="required,email">
</div>

<div class="mb-3">
    <label class="form-label">Password</label>
    <input type="password" class="form-control" name="password" id="password"
           data-validate="min-length" data-min-length="4">
</div>

<div class="mb-3">
    <label class="form-label">RUT</label>
    <input type="text" class="form-control" name="rut" id="rut"
           data-validate="required,rut">
</div>

<div class="mb-3">
    <label class="form-label">Perfil</label>
    <select type="text" class="form-control" name="perfil_id" id="perfil_id"
           data-validate="required">
        <?php 
            foreach ($perfiles as $key => $perfil) {
                ?>
                <option value="<?=$perfil["id"] ?>"><?=$perfil["nombre"]?></option>
                <?php
            }
        ?>
    </select>
</div>

<div class="mb-3">
    <label class="form-label">Activo</label>
    <select class="form-select" name="activo" id="activo" 
            data-validate="required">
        <option value="" selected disabled>Seleccione…</option>
        <option value="1">Sí</option>
        <option value="0">No</option>
    </select>
</div>

<script>
document.addEventListener("submit", function(e){
    let form = e.target;
    if (form.hasAttribute("data-validate")) {
        let campos = form.getAttribute("data-validate").split(",");
        if (!validator(campos)) {
            e.preventDefault();
            return false;
        }
    }
});
</script>
