JSFiddle - React, Tailwind, and code Playground

by Thet Hlaing

JavaScript

//Validators
class Select_With_HDF_Validator {
    constructor(select_input, list_hdf, submit_btn, alert_message) {
        this.model = {};
        this.model.select_input = document.querySelector(select_input);
        this.model.list_hdf = document.querySelector(list_hdf);
        this.model.submit_btn = document.querySelector(submit_btn);
        this.model.alert_message = alert_message;
        this.event_binder();
    }
    event_binder() {
        this.model.submit_btn.addEventListener('click', e => this.validator(e));
    }

    validator(event) {
        const selected_index = this.model.select_input.selectedIndex;
        const hdf_value = this.model.list_hdf.value;

        //User doesn't click after selecting dropdown list
        if (hdf_value === '' && selected_index !== 0) {
            alert(this.model.alert_message);
            event.preventDefault();
        }
    }
};


$(document).ready(function () {
    const hospital_validator = new Select_With_HDF_Validator(
            '#DeliveryHospital',
            '#hospital_ids_hdf',
            '#submit',
            'Please click ADD HOSPITAL.'
            );

    const am_validator = new Select_With_HDF_Validator(
            '#User',
            '#user_ids_hdf',
            '#submit',
            'Please click ADD AM.'
            );
});