New UI - Conditional required Fields (Lookup Field/ other Fi

Posted by Meryk on 25-Nov-2015 09:03

Hello,

I have some fields that I need to make required depending on some conditions.

When the field is a lookup, doing this :

$('#fieldIntName').attr('required', 'required');

$('#fieldIntName > span').addClass('rbs-required);

is enough to make the field required and display an error message when trying to save without filling it.

Now I have the case of a date field (I haven't tried with other types), on which I want to do exactly the same conditional validation. It is not working, i.e, field is not required (saving can be done without this field) and the error message is not showing.

Is that a known behavior?I know I can just have a field validation for the date field, but why these two different behaviors?

Thank you

Meryem

Posted by Mohammed Siraj on 04-Feb-2016 00:23

Yes Meryem, you will need to explicitly add a validationMsg div to better manage layout. Can you please adds this one step to the code you have shared above:

var fieldContext = rbf_getFieldContext(fieldName);

if(fieldContext){

var fieldEl = fieldContext.getNode();

fieldEl.prop('required',true);

fieldEl.attr('data-required-msg','Date field value must be specified');

appendValidationEl (fieldEl,fieldContext.getContainer();

}

$('rbi_L_fieldName > span').addClass('rbs-required'),

function appendValidationEl ( inputEl, elToAppendTo ) {

       var kendoValidationSpan = $('<span style="margin-left: .8em;" class="k-invalid-msg"></span>');

       kendoValidationSpan.attr('data-for',inputEl.attr('name'));

       //have validation messages displayed in their own row

       var itsErrorSpanEl = $('<div class="rbs-validationMsg"></div>');

       itsErrorSpanEl.append(kendoValidationSpan);

       elToAppendTo.append(itsErrorSpanEl);

}

Posted by Thierry Ciot on 08-Feb-2016 23:06

You should be able to check if there is a child element with class rbs-validationMsg before appending using jquery:

if ( elToAppendTo.find(".rbs-validationMsg").length === 1 )

Thierry.

All Replies

Posted by Mohammed Siraj on 26-Nov-2015 02:34

Meryem, direct DOM manipulation may not suffice as for some of the field controls we need to set the options before the kendo widget is initialized & the actual steps may also vary from one field type to another.

Understand your requirement of dynamically marking some fields as 'required'. Request you to file an enhancement for the same in IDEAS section. Will provide an client-side API method going forward that will correctly mark the field as required & also integrate the same with kendo validator.

For now, to mark the Date field as REQUIRED:

var fieldContext = rbf_getFieldContext(fieldName);

if(fieldContext){

 var fieldEl = fieldContext.getNode();

 fieldEl.prop('required',true);

 fieldEl.attr('data-required-msg','Date field value must be specified');

}

These steps should suffice for most of the field types, as it follows HTML5 spec for validity constraints, which we are enforcing using KendoValidator.

Note: To create/access a jquery object for a field, use rbf_getFieldContext(fieldName).getNode(). This way you will not have to run a jquery selector which will have performance overhead but instead, existing jquery object from PageContext state will be returned.

Posted by Meryk on 09-Dec-2015 08:47

Hi Siraj,

That's working fine thank you :)

Just needed to add $('rbi_L_fieldName > span').addClass('rbs-required'), for the small 'exclamation' icon to show.

Once again, yes we will need to start using rbf_getFieldContext for our custom implementations and avoid using jQuery selectors.

Cheers,

Meryem

Posted by Meryk on 29-Jan-2016 06:11

Hi Siraj,

I just came across some issues here. So just to remind, what I am doing is :

var fieldContext = rbf_getFieldContext(fieldName);

if(fieldContext){

var fieldEl = fieldContext.getNode();

fieldEl.prop('required',true);

fieldEl.attr('data-required-msg','Date field value must be specified');

}

$('rbi_L_fieldName > span').addClass('rbs-required'), 

1- There is an alignment problem with this span (the one shown in red in the screenshot here) :

<span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" data-for="activityCampaign" role="alert"><span class="k-icon k-warning"> </span> Campaign must be specified</span>

It looks like it goes under the k-multiselect in that case, whereas it should go under the rbi_F_.. div, as shown in this screen shot:

Also, if you compare the two shown fields here : Category and Campaign, you will see the alignment is not the same. This same span I am describing before is added as the last child of the div rbi_F_... div in the case of a rollbase required field. Which we would expect to be the case for the other field as well.

Is that a bug? 

2- We would also like to have this code handling the 'exclamation icon' as well, and not have to add it manually, as it should be part of making the field required.

Can this be done please?

Thank you

Meryem

Posted by Mohammed Siraj on 04-Feb-2016 00:23

Yes Meryem, you will need to explicitly add a validationMsg div to better manage layout. Can you please adds this one step to the code you have shared above:

var fieldContext = rbf_getFieldContext(fieldName);

if(fieldContext){

var fieldEl = fieldContext.getNode();

fieldEl.prop('required',true);

fieldEl.attr('data-required-msg','Date field value must be specified');

appendValidationEl (fieldEl,fieldContext.getContainer();

}

$('rbi_L_fieldName > span').addClass('rbs-required'),

function appendValidationEl ( inputEl, elToAppendTo ) {

       var kendoValidationSpan = $('<span style="margin-left: .8em;" class="k-invalid-msg"></span>');

       kendoValidationSpan.attr('data-for',inputEl.attr('name'));

       //have validation messages displayed in their own row

       var itsErrorSpanEl = $('<div class="rbs-validationMsg"></div>');

       itsErrorSpanEl.append(kendoValidationSpan);

       elToAppendTo.append(itsErrorSpanEl);

}

Posted by Meryk on 08-Feb-2016 11:43

Hi Siraj,

Thank you this is solving the problem. But it is appending the ValidationMsg multiple times. We need to check if the appending has been done already or not.

Cheers,

Meryem

Posted by Thierry Ciot on 08-Feb-2016 23:06

You should be able to check if there is a child element with class rbs-validationMsg before appending using jquery:

if ( elToAppendTo.find(".rbs-validationMsg").length === 1 )

Thierry.

This thread is closed