th-inputs v3.0.1

Thiqah Inputs validation Components

Thiqah Inputs Validation Component is a web component developed by Thiqah Frontend Development Team

Installation

• 1- configure .npmrc create .npmrc file inside your project and add thiqah npm registry on thiqah TFS to allow your machine from installing our npm package

registry=https://tf.thiqah.sa/tfs/DefaultCollection/_packaging/Thiqah.ReusableComponent.FrontEnd/npm/registry/
always-auth=true

• 2- install package to install thiqah inputs validation package run the following command line in your bash or command prompt

npm install th-inputs

Usage in regular web project

static pages, .NET or any none JS framework inside your html file,

• Add vendor and app JS Files at the end of BODY tag:

<script type="text/javascript" src="node_modules/th-input/vendors.js"></script>
<script type="text/javascript" src="node_modules/th-input/app.js"></script>

• in case you need to add any global style files such as bootstrap, be sure that you are injecting it inside BODY tag and allow shady dom

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- allow shady dom -->
<script>window.ShadyDOM = { force: true };</script>

• inside your HTML, be sure from passing all needed properties

<th-input 
  validatorType='email' 
  lang="en" 
  type="textarea" 
  class_name="form_control" 
  name="email"
  label="email" 
  id="email" 
  placeholder="email" 
  value="" 
  submitted="0"
  default_error="1">
</th-input>

• to integrate with the implemented component, listen to its events and update its data

var ThiqahInputs = function ThiqahInputs() {
  this.email = document.querySelector("th-input[id=email]");
  this.events();
};

// add event listeners to listen to component  
ThiqahInputs.prototype.events = function () {
  this.email.addEventListener("validityChangeHandler", this.validityChangeHandler.bind(this));
};

// the call back that will recive component data
ThiqahInputs.prototype.validityChangeHandler = function (event) {
  console.log(event.detail);
  console.log(event.detail.val);
  event.detail.formData ? console.log(event.detail.formData.get(this[event.detail.id].ctrl)) : null;
};

// to pass the submit event to the component to allow validation with submission
ThiqahInputs.prototype.submitHandler = function (event) {
  event.preventDefault();
  this.email.submitted++;
};

// to init ThiqahInputs once page loaded
window.addEventListener("load", function (event) {
  new ThiqahInputs();
});

Usage in Angular web project

• First, add vendors.js and app.js files into angular.json file.

"scripts": [
  "node_modules/th-input/vendors.js",
  "node_modules/th-input/app.js"
]

• Now, import CUSTOM_ELEMENTS_SCHEMA and NO_ERRORS_SCHEMA inside app.nodule.ts and add schemas to @NgModule

import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
@NgModule({
  imports: [
    BrowserModule,
  ],
  declarations: [],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
    NO_ERRORS_SCHEMA
  ]
})

• inside component.ts add

import { Component, ElementRef, NgZone } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @ViewChild("email", { static: false }) email: ElementRef;
  public data;
  
  constructor(
    private _ngZone: NgZone
    ) { }
    
  inputDetector() {
    const email = this.email.nativeElement;
    email.addEventListener('validityChangeHandler', (event) => {
      this._ngZone.run(() => {
        console.log(event['detail']);
        ele.value = event['detail'].val;
      });
    });
   }
   
   ngAfterViewInit() {
    this.inputDetector();
   }
 }

• inside component.ts add:

<th-input 
  validatorType='email' 
  lang="en" 
  type="textarea" 
  class_name="form_control" 
  name="email"
  label="email" 
  id="email" 
  placeholder="email" 
  value="" 
  submitted="0"
  default_error="1">
</th-input>

-- Now, You can import bootstrap or any other CSS libraries into your angular application.

Avialable Inputs

1) Email 2) Full name 3) Resident id 4) Saudi id 5) Saudi mobile number 6) Saudi phone number 7) Saudi postal code 8) Upload image 9) Address 10) Age 11) International Mailbox 12) Mailbox 13) Name 14) Notes 15) Description

Properties

Denied Records Component

Denied Records Component has it's own validator signature

<th-denied-records 
  validator='{"keywords":["ali", "it", "lorem"], "maxLength":1000, "required": true}' 
  lang="en" 
  class_name="form_control" 
  value="" 
  name="denied-records" 
  id="denied-records" 
  placeholder="denied records" 
  label="denied records" 
  default_error="1">
</th-denied-records>

Select Menu Component

Select Menu Component has it's own attrs

<th-select 
  dataoptions='{
    "ar": ["متزوج"," مطلق", "ارمل", "أعزب"], 
    "en":["Married", "Single", "Divorced", "Widowed"]}' 
  id="socialStatus" 
  name="socialStatus" 
  value="" 
  class_name="form_control" 
  lang="en">
</th-select>

<th-select 
  dataoptions='{
    "ar": ["ميت", "على قيد الحياة"],
    "en":["alive", "dead"]}' 
  id="alive" 
  name="alive" 
  value="" 
  class_name="form_control" 
  lang="en">
</th-select>

Multi Select Menu Component has it's own attrs

<th-multi-select 
  id="select"
  name="select" 
  list='["ahmed", "ali", "lili"]' 
  lang="en"
  validator='{"required": true}' 
  placeholder="select names" 
  default_error="1" 
  label="select names"
></th-multi-select>

adding custom validations

<th-input 
  validator='{}' 
  lang="en" 
  type="text" 
  class_name="form_control" 
  name="email"
  label="email" 
  id="email" 
  placeholder="email" 
  value="" 
  submitted="0"
  default_error="1">
</th-input>

var ThiqahInputs = function ThiqahInputs() {
      this.x = document.querySelector("th-input[name=xx]");
      this.init();
      this.events();
  };

  ThiqahInputs.prototype.init = function () {
      this.x.validator = {
          empty: {
              value: "",
              errors: {
                  "ar": "الرجاء إدخال قيمة الاسم الكامل",
                  "en": "please add your full name"
              }
          },
          minLength: {
              value: 8,
              errors: {
                  "ar": "الاسم الكامل يجب الا يقل عن 8 احرف ولا يزيد عن 120 حرف",
                  "en": "full name lengh should't be less than 8 characters and should't be more than 120 characters"
              }
          },
          maxLength: {
              value: 120
          },
          regex: [{
              pattern: /[0-9~!@#$%^&*()-_+=\/:'"<>|]/g,
              errors: {
                  "ar": "الاسم الكامل يجب ان يكون حروف فقط",
                  "en": "full name should contain characters only"
              }
          }]
      };
  };

  // add event listeners to listen to component  
  ThiqahInputs.prototype.events = function () {
      this.x.addEventListener("validityChangeHandler", this.validityChangeHandler.bind(this));
  };

  // the call back that will recive component data
  ThiqahInputs.prototype.validityChangeHandler = function (event) {
      console.log(event.detail);
      console.log(event.detail.val);
      event.detail.formData ? console.log(event.detail.formData.get(this[event.detail.id].ctrl)) :
          null;
  };

  // to pass the submit event to the component to allow validation with submission
  ThiqahInputs.prototype.submitHandler = function (event) {
      event.preventDefault();
  };

  // to init ThiqahInputs once page loaded
  window.addEventListener("load", function (event) {
      new ThiqahInputs();
  });

Upload Files component

  <th-upload 
    lang="en" 
    class_name="form-control" 
    name="upload" 
    label="upload" 
    upload_text="upload" 
    id="upload"
    default_error="1"
    file_extension='["JPEG", "JPG", "BMP", "GIF", "PNG", "TIFF", "TIF", "PDF", "MP4", "MP3", "ZIP", "RAR", "TGZ", "JSON", "XML", "CSV"]'
    max_size='2000000' 
    isMultiple="1">
  </th-upload>

  window.addEventListener('load', (e) => {.
    var upload = document.querySelector("th-upload[name=upload]");
    upload.addEventListener('validityChangeHandler', fetchDate);
    function fetchDate(event) {
      console.log(event.detail);
    }
  });

Upload Files Properties

Events

Events can be used to align columns.

js selectors

let multiSelect = document.querySelector("th-multi-select");
let email = document.querySelector("th-input[name=email]");
let age = document.querySelector("th-input[name=age]");
let saphone = document.querySelector("th-input[name=saphone]");
let samobile = document.querySelector("th-input[name=samobile]");
let sapostalcode = document.querySelector("th-input[name=sapostalcode]");
let address = document.querySelector("th-input[name=address]");
let denied_records = document.querySelector("th-denied-records");
let full_name = document.querySelector("th-input[name=full_name]");
let mailbox = document.querySelector("th-input[name=mailbox]");
let fax = document.querySelector("th-input[name=fax]");
let itMailbox = document.querySelector("th-input[name=itMailbox]");
let name = document.querySelector("th-input[name=name]");
let description = document.querySelector("th-input[name=description]");
let socialStatus = document.querySelector("th-select[name=socialStatus]");
let alive = document.querySelector("th-select[name=alive]");
let notes = document.querySelector("th-input[name=notes]");
let resident_id = document.querySelector("th-resident-id");
let x = document.querySelector("th-input[name=xx]");
let checkbox = document.querySelector("th-input[type=checkbox]");
let radio = document.querySelector("th-input[type=radio]");
let upload = document.querySelector("th-upload[name=upload]");
let saudi_id = document.querySelector("th-input[name=saudi_id]");
let resident_id = document.querySelector("th-input[name=resident_id]");

Events

Events can be used to align columns.

Full exmaple

var ThiqahInputs = function () {
    this.multiSelect = document.querySelector("th-multi-select");
    this.email = document.querySelector("th-input[name=email]");
    this.age = document.querySelector("th-input[name=age]");
    this.saphone = document.querySelector("th-input[name=saphone]");
    this.samobile = document.querySelector("th-input[name=samobile]");
    this.sapostalcode = document.querySelector("th-input[name=sapostalcode]");
    this.address = document.querySelector("th-input[name=address]");
    this.denied_records = document.querySelector("th-denied-records");
    this.full_name = document.querySelector("th-input[name=full_name]");
    this.mailbox = document.querySelector("th-input[name=mailbox]");
    this.fax = document.querySelector("th-input[name=fax]");
    this.itMailbox = document.querySelector("th-input[name=itMailbox]");
    this.name = document.querySelector("th-input[name=name]");
    this.description = document.querySelector("th-input[name=description]");
    this.socialStatus = document.querySelector("th-select[name=socialStatus]");
    this.alive = document.querySelector("th-select[name=alive]");
    this.notes = document.querySelector("th-input[name=notes]");
    this.resident_id = document.querySelector("th-resident-id");
    this.x = document.querySelector("th-input[name=xx]");
    this.checkbox = document.querySelector("th-input[type=checkbox]");
    this.radio = document.querySelector("th-input[type=radio]");
    this.upload = document.querySelector("th-upload[name=upload]");
    this.saudi_id = document.querySelector("th-input[name=saudi_id]");
    this.resident_id = document.querySelector("th-input[name=resident_id]");
    this.init();
    this.events();
};

ThiqahInputs.prototype.init = function () {
    this.x.validator = {
        required: {
            value: "",
            errors: {
                "ar": "الرجاء إدخال قيمة الاسم الكامل",
                "en": "please add your full name"
            }
        },
        minLength: {
            value: 8,
            errors: {
                "ar": "الاسم الكامل يجب الا يقل عن 8 احرف ولا يزيد عن120 حرف",
                "en": "full name lengh should't be less than 8 characters and should't be more than120 characters"
            }
        },
        maxLength: {
            value: 120
        },
        regex: [{
            pattern: /[0-9~!@#$%^&*()-_+=\/:'"<>|]/g,
            errors: {
                "ar": "الاسم الكامل يجب ان يكون حروف فقط",
                "en": "full name should contain characters only"
            }
        }]
    };
};

// add event listeners to listen to component  
ThiqahInputs.prototype.events = function () {
    this.multiSelect.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.email.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.saphone.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.sapostalcode.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.samobile.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.address.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.denied_records.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.full_name.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.mailbox.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.fax.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.itMailbox.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.name.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.description.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.socialStatus.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.alive.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.notes.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.x.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.upload.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.checkbox.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.radio.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.age.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.resident_id.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    this.saudi_id.addEventListener('validityChangeHandler', this.fetchDate.bind(this));
    document.forms['test'].addEventListener('submit', this.submitHandler.bind(this));
};

// the call back that will recive component data
ThiqahInputs.prototype.fetchDate = function (event) {
    console.log(event.detail);
    console.log(event.detail.val);
};

// to pass the submit event to the component to allow validation with submission
ThiqahInputs.prototype.submitHandler = function (event) {
    event.preventDefault();
    this.email.submit();
    this.saphone.submit();
    this.sapostalcode.submit();
    this.samobile.submit();
    this.address.submit();
    this.full_name.submit();
    this.mailbox.submit();
    this.fax.submit();
    this.itMailbox.submit();
    this.name.submit();
    this.description.submit();            
    this.notes.submit();
    this.x.submit();
    this.age.submit();
    this.checkbox.submit();
    this.radio.submit();
    this.resident_id.submit();
    this.saudi_id.submit();
    this.denied_records.submit();

    // this.upload.submit();
    this.multiSelect.submit();
};

// to init ThiqahInputs once page loaded
window.addEventListener("load", function (event) {
    new ThiqahInputs();
});

Contributing

License

THIQAH Frontend Team KSA