Validate the Component (Managed Package)

For the managed package runtime, learn how to add validation to the OmniScriptBaseMixin component by redefining the checkValidity() function.

1. This code example contains a checkValidity() function that returns false when the sum is less than zero. Replace the NS variable in the code example with the namespace of the managed package you’re using.

   import { api } from 'lwc';
   import { OmniscriptBaseMixin } from 'NS/omniscriptBaseMixin';
   export default class MyCustomLwc extends OmniscriptBaseMixin(LightningElement) {
      sum = 0;
   
          // defining custom validation conditions   
      @api checkValidity() { 
         return this.sum < 100;
      }
   }

2. Define a trigger for the custom validation so that the Omniscript can check the custom Lightning web component's validity.
   The HTML and JavaScript examples show how the custom validation is called with omniValidate() after a user enters their input.

   HTML example:

   <template>
       <lightning-input type="number"
                        label="Enter a number between 1 and 5" 
                        onblur={validateOnBlur}
                        onchange={handleChange}
                        required>
       </lightning-input>
   
       <div if:true={showValidation} class="slds-notify slds-notify_alert slds-alert_error" role="alert">
           <h2> Please enter a number between 1 and 5 </h2>
         </div>
   </template>

   JavaScript example:

   import { LightningElement, api } from 'lwc';
   import { OmniscriptBaseMixin } from 'omnistudio/omniscriptBaseMixin';
   export default class MyCustomLwc extends OmniscriptBaseMixin(LightningElement) {
      value = 3;
   
      // defining custom validation conditions 
      // 2,3 or 4 will return true
      // all other numbers will return false
      checkValidity() { 
         return 1 < this.value && this.value < 5;
      }
      
      validateOnBlur() {
         // when parameter is true, sets the variable : showValidation to true
         this.omniValidate(true);
      }
   
      handleChange(event) {
         this.value = event.detail.value;
     }
   }