Custom validation message - Client Side - Numeric Field - Forum - Rollbase - Progress Community

Custom validation message - Client Side - Numeric Field

 Forum

Custom validation message - Client Side - Numeric Field

This question is answered

Hello,

I have two numeric text box fields and the value of one depends on the other. I would like to add some custom client side validation on the second text box field and this value always needs to be greater than the first field. Is there a way to check this using client-side validation techniques (not server-side)? Kindly let me know.

Cheers.

Iram

Verified Answer
  • 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);

    }

    Regards,
    Siraj.
All Replies
  • 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>  

    Regards,
    Siraj.
  • 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 ,

    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.

    Regards,
    Siraj.
  • 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);

    }

    Regards,
    Siraj.
  • Lovely. Thanks for your solution . Works nicely now. Also it would be great if we could have this documented somewhere for future references :)