Validation on firstFocus

[YossiBenZaken]

i create a textbox input and the validation work only on:

• Submit
• Always

and i want with first focus

 <reference path='../../Libraries/bobril/library.d.ts'/>

  <reference path='../../Libraries/dc-helpers/library.ts'/>
 <reference path='../../Libraries/bobril-onchange/library.d.ts'/>
 <reference path='../../Libraries/validation/library.ts'/>
  <reference path="../../Libraries/bobril-focus/library.d.ts"/>

declare let textboxStyle: IBobrilStyleDef;
declare let textboxInvalidStyle: IBobrilStyleDef;
declare let labelStyle: IBobrilStyleDef;

const enum TextboxType { TEXT = "text", PASSWORD = "password", SEARCH = "search" }

const enum Autocapitalize {
NONE = "none",
SENTENCES = "sentences",
WORDS = "words",
CHARACTERS = "characters"
}

interface IData {
datactx: IDataCtx;
id: string;
placeholder: string;
type: TextboxType;
maxlength: number;
autocapitalize: Autocapitalize;
}

interface ICtx extends IBobrilCtx {
data: IData;
firstFocus: boolean;
}

interface IDataCtx {
setValue(value: string): void;
getValue(): string;
}
let applyInvalidStyle: boolean = true;
const divComponent: IBobrilComponent = {

id: "DivComponent",
init(ctx: ICtx, me: IBobrilCacheNode): void {
    initValidatedInput(ctx, me, "Value");
},
render(ctx: ICtx, me: IBobrilNode): void {
    me.tag = 'div';
    applyInvalidStyle = !isValid(ctx)
        && ctx.cfg
        && ctx.cfg.shouldShowValidation(ctx);
    me.children = [createInputComponent(ctx), b.style!({ tag: 'label', children: ctx.data.placeholder, attrs: { for: ctx.data.id } }, labelStyle)]
},
onChange(ctx: ICtx, value: string): void {
    ctx.data.datactx.setValue(value);
},
onBlur(ctx: ICtx): void {
    if (!ctx.firstFocus) {
        ctx.firstFocus = true;
        b.invalidate();
    }
}

};
function createInputComponent(ctx: ICtx): IBobrilNode {
return {
data: ctx.data,
component: inputTextComponent
}
}
const inputTextComponent: IBobrilComponent = {
id: "TextBoxComponent",

render(ctx: ICtx, me: IBobrilNode): void {
    const d = ctx.data;
    me.tag = "input";
    me.attrs = b.assign(
        me.attrs || {}, {
        id: d.id,
        name: d.id,
        placeholder: ' ',
        value: d.datactx.getValue(),
        maxlength: d.maxlength
    },
        getReadOnlyStatus(ctx) ? { readonly: true } : {}
    );

    b.style!(me, textboxStyle, applyInvalidStyle && textboxInvalidStyle)
},
onChange(ctx: ICtx, value: string): void {
    if (!ctx.firstFocus) {
        ctx.firstFocus = true;
        b.invalidate();
    }
    ctx.data.datactx.setValue(value);
},
onBlur(ctx: ICtx): void {
    if (!ctx.firstFocus) {
        ctx.firstFocus = true;
        b.invalidate();
    }
}

}
var getID = (): string => {
return Math.random().toString(36).substr(2, 9);
}
export function textBoxFactory(
type: TextboxType,
placeholder: string,
maxLength: number,
autocapitalize: Autocapitalize,
dataCtx: IDataCtx
): IBobrilNode {
const ID = getID();
return {
data: {
placeholder,
type,
id: ID,
maxlength: maxLength >= 0 ? maxLength : null,
autocapitalize,
datactx: dataCtx
},
component: divComponent
};
}

[Bobris]

onFocus and onBlur events in bobril does not bubble (at least in that classic non npm version). Use onFocusIn and onFocusOut instead.
Also use ``` to correctly mark start of code in markdown so it will be better formatted.
BTW why you are trying to use old classic version and not modern npm version with bobril-build? Is description on https://bobril.com not clear?

[YossiBenZaken]

the company that i work use program "Inspire Designer"
and that the syntax so...
and thank you

[Bobris]

Ah, good to know (disclosure I am architect of Inspire Designer). Don't hesitate to ask additional questions here, and of course you can use Quadient support too.

[YossiBenZaken]

there is a way to integrate component TSX file inside Inspire Designer?

[Bobris]

No it is not. In theory you could "port" createElement function from "full" Bobril, but it would be pretty wasteful. If you don't use event listener callbacks (which createElement converts to inline Bobril components) manual conversion is pretty straightforward.

[YossiBenZaken]

thank you