javascript - keycloak custom fields verfication -

ive been developing web app uses keycloak autentication service. project developed further had need of adding more fields registration of user on context of project.

i created template , added fields needed on form using:

 <input type="text" class="w-input inputbox"  id="user.attributes.mobile" name="user.attributes.mobile" /> 

did fields needed nif,cc,mobile, address, etc...

and working nicely charm :d

my problem validate fields.

for example on mobile field need check if has 9 digits. nif have consume service check if nif exists etc...

its not dont know how check string see if has lenght of 9 :d real problem have keycloak image mounted on deocker-compose. so, engine compile , cant add functions engine. ftl file added registration fields doesnt read javascript.

how can this?

in case u want read throught full ftl file here is

<#ftl encoding="utf-8"> <#import "template.ftl" layout> <@layout.registrationlayout; section>     <#if section = "title">         ${msg("registerwithtitle",(realm.displayname!''))}     <#elseif section = "header">         ${msg("registerwithtitlehtml",(realm.displaynamehtml!''))}     <#elseif section = "form">         <div class="h2">novo registo</div>         <div class="panel">             <div class="w-form">                 <form id="kc-register-form" action="${url.registrationaction}" method="post" class="w-clearfix">                     <#if !realm.registrationemailasusername>                         <label for="username" class="label">${msg("username")}</label>                         <input type="text" id="username" class="w-input inputbox" name="username" value="${(register.formdata.username!'')?html}" />                     </#if>                     <label for="firstname" class="label">${msg("firstname")}</label>                     <input type="text" id="firstname" class="w-input inputbox" name="firstname" value="${(register.formdata.firstname!'')?html}" />                      <label for="lastname" class="label">${msg("lastname")}</label>                     <input type="text" id="lastname" class="w-input inputbox" name="lastname" value="${(register.formdata.lastname!'')?html}" />                      <label for="email" class="label">${msg("email")}</label>                     <input type="text" id="email" class="w-input inputbox" name="email" value="${(register.formdata.email!'')?html}" />                       <#if passwordrequired>                         <label for="password" class="label">${msg("password")}</label>                         <input type="password" id="password" class="w-input inputbox" name="password" />                          <label for="password-confirm" class="label">${msg("passwordconfirm")}</label>                         <input type="password" id="password-confirm" class="w-input inputbox" name="password-confirm" />                     </#if>                      <!-- inicio dos atributos -->                           <label for="user.attributes.mobile" class="label">telefone</label>                         <input type="text" class="w-input inputbox"  id="user.attributes.mobile" name="user.attributes.mobile" />                           <label for="user.attributes.address" class="label">morada</label>                         <input type="text" class="w-input inputbox"  id="user.attributes.address" name="user.attributes.address"/>                          <label for="user.attributes.cc" class="label">cc</label>                         <input type="text" class="w-input inputbox"  id="user.attributes.cc" name="user.attributes.cc"/>                          <label for="user.attributes.nif" class="label">nif</label>                         <input type="text" class="w-input inputbox"  id="user.attributes.nif" name="user.attributes.nif"/>                          <label for="user.attributes.age" class="label">idade</label>                         <input type="text" class="w-input inputbox"  id="user.attributes.age" name="user.attributes.age" required/>                          <label for="user.attributes.degree" class="label">habilitações literarias</label>                         <select class="w-input inputbox"  id="user.attributes.degree" name="user.attributes.degree">                             <option value="nível 1">2.º ciclo ensino básico</option>                             <option value="nível 2">3.º ciclo ensino básico, obtido no ensino regular ou por percursos de dupla certificação</option>                             <option value="nível 3">ensino secundário vocacionado para o prosseguimento de estudos nível superior</option>                             <option value="nível 4">ensino secundário obtido por percursos de dupla certificação ou ensino secundário vocacionado para o prosseguimento de estudos nível superior acrescido de estágio profissional – mínimo de seis meses</option>                             <option value="nível 5">qualificação de nível pós-secundário não superior com créditos para o prosseguimento de estudos nível superior</option>                             <option value="nível 6">licenciatura</option>                             <option value="nível 7">mestrado</option>                             <option value="nível 8">doutoramento</option>                         </select>                      <!-- fim dos atributos -->                      <#if recaptcharequired??>                         <div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchasitekey}"></div>                     </#if>                     <br/>                     <div class="w-form">                         <div class="w-clearfix">                           <input class="botao w-button" data-wait="please wait..." type="submit" value="registar-me"/>                           <a href="${url.loginurl}" class="botao w-button" style="color: white;">cancelar</a>                         </div>                     </div>                  </form>             </div>         </div>     </#if> </@layout.registrationlayout>