Custom validation message - Client Side - Numeric Field

You should use the events on the 2nd field's definition (onBlur in particular)  in conjunction with rbf_getFieldValue() client-side api to get the first field value and do the necessary calculations.

As suggested by Santosh, you can apply custom validation on onchange/blur event of another field.

Also, we leverage kendoValidation framework for client-side validation.

It should be possible to inject custom validation rules. Also see: demos.telerik.com/.../custom-validation

Sample Snippet:

<script>

 function augmentValidationRules() {

 var formDetails = rbf_getPageContext().getFormDetails(rb.newui.util.EDIT_FORM_NAME);

 var kValidator = formDetails && formDetails.getKendoValidator();

 if (!kValidator) {

   return;

 }

 var rules = kValidator.options.rules;

 var messages = kValidator.options.messages;

 //augment rules & validtion messages..

 rules.myRule = function (input) {

   //note this will be called for each field in the form

   var retValue = true;

   if (input.attr('name') === 'myField') {

     //do custom validator for field 'myField'

     retValue = false;

   }

   return retValue;

 };

 messages.myRule = function (input) {

   return 'Custom validation failed';

 };

 //reset kendo validator with augmented rules & validation messages

 kValidator.setOptions({

   rules: rules,

   messages: messages

 });

}

rb.newui.util.addEventListener(rb.newui.util.customEvents.rbs_pageRender, augmentValidationRules);

</script>  

Hi Iram,

This is extension to Santosh reply.

Please follow the below steps:

1) Navigate to new record page -> Design this page

2) Add a script component

3) Add below sample code.

<script>

function validate()
{
  var a=parseInt(rbf_getFieldValue("One"));   // One is integration name of First numeric text field
  var b=parseInt(rbf_getFieldValue("Two"));   // Teois integration name of second numeric text field
  if(a>=b)
    {
      alert("Two value should be greater than one");  
    }
	
}

</script>

4) Navigate to Object Definition -> Fields -> Second Field-> Events

5) Invoke javascript funtion on "onchange" event

onchange="validate();"

6) Save

Hi Iram,

above approach will work for only New record page. If you want to achieve same behaviour in edit page also then follow the below approach.

1) Navigate to Object Definition -> Fields -> Second Field -> Events

2) Paste the below code as value for "onchange" event and Save

if(parseInt(rbf_getFieldValue("One"))>=parseInt(rbf_getFieldValue("Two"))) {alert("Two value should be greater than one");}

Thanks

Srinivas

Hello [mention:78c86023544844079dc6455a4a7a4d57:e9ed411860ed4f2ba0265705b8793d05],

Yes I am looking to leverage the kendo validator function. I do understand the aspect of using events on fields so that's all clear. I was just looking for a kendo validator option. Will check and let you know if I face any issues.

Cheers.

Iram

Ok that's good and it does work, however if I then want to remove the validation message once the field has successfully validated and the user enters the correct value, what changes do I need to do to the above code in order to cater for that as well?

Cheers.

Iram

Validation will always fire against the current field value. Ensure that validation rule returns TRUE in such a scenario.

Hello Siraj,

Yes you are right that the validation rule with always fire against the current field value. I am however getting some CSS isues for the numeric field. I am using the name of the field as suggested in your answer: (input.attr("name") === "price") May be I'm not targeting it right? Kindly let me know.

Cheers.
Iram

Yes, to better manage layout, you will have to explicitly add a validationMsg div. Please refer to this post:

community.progress.com/.../21612

Also, sharing the same snippet here:

var fieldContext = rbf_getFieldContext(fieldName);

if (fieldContext) {

 var fieldEl = fieldContext.getNode();

 appendValidationEl(fieldEl, fieldContext.getContainer();

}

function appendValidationEl(inputEl, elToAppendTo) {

 if ( elToAppendTo.find(".rbs-validationMsg").length > 0 ) {

    //do not re-add if already exist...

    return;

 }

 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);

}

Lovely. Thanks for your solution [mention:78c86023544844079dc6455a4a7a4d57:e9ed411860ed4f2ba0265705b8793d05]. Works nicely now. Also it would be great if we could have this documented somewhere for future references :)