<div class="field">
   <div class="ui corner labeled input">
   <input type="text" placeholder="Nombre." name="rol_nombre" id="rol_nombre">;
   <div class="ui corner label">
   <i class="asterisk icon"></i>
   </div>
   </div>
</div>

let nombre = '';

    $('#rol_nombre').keyup(() => {
        nombre = $('#rol_nombre').val();
    })

$(() => {
        $.fn.form.settings.rules.myCustomRule = function (param) {
            $.get(`/rol/search?key=${param}`, (data) => {
                if (data.rol_state == 1) {
                    console.log('Registrado y activo');
                    return false;
                } else if (data.rol_state == 0) {
                    console.log('Registrado pero esta inactivo');
                    return false;
                } else {
                    console.log('No existe coincidencias');
                    return true;
                }

            });


        }

        $('#frm-rol').form({

            rol_nombre: {
                identifier: 'rol_nombre',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'Ingrese un nombre'
                    },
                    {
                        type: 'minLength[5]',
                        prompt: 'Debe ingresar minimo 5 caracteres'
                    },
                    {
                        type: 'maxLength[10]',
                        prompt: 'Debe ingresar maximo 10 caracteres'
                    },
                    {
                        type: 'myCustomRule[nombre]',
                        prompt: 'El nombre ya fue registrado'

                    }
                ]
            }

        })
    });