JSFiddle - React, Tailwind, and code Playground

by Thet Hlaing

HTML

<div class="container">
    <form id='main-form' role="form" method="post" enctype="multipart/form-data" autocomplete="off">
        <div class="row">            
            <div class="col s12 m12">                
                <div class="input-group">
                    <label for='DeliveryHospital' class="main-label">Select Hospital :</label>
                    <select class="browser-default" id="DeliveryHospital" required>
                        <option value="">Please Select Hospital</option>                                     <option value="1">Hospital 1</option>
                        <option value="2">Hospital 2</option>
                        <option value="3">Hospital 3</option>
                    </select>                            
                </div>
                <br>
                <div class="col-md-12" style="text-align:right;">
                    <a id="add-hospital" class="btn btn-primary waves-effect">Add Hospital</a>
                </div>
                <input type="hidden" value="" class="validate" id="hospital_ids_hdf" name="form[delivery_hospitals]"> 
                <br>
                <div class="input-group">
                    <label for='HospitalsList' class="main-label">Hospitals :</label>
                    <ul id="HospitalsList">
                    </ul>
                </div>
                <br>
                <div class="input-group">
                    <label for='User' class="main-label">Select User :</label>
                    <select class="browser-default" id="User" required>
                        <option value="">Please Select AM</option>
                        <option value="1">Mg Mg</option>
                        <option value="2">Ko Ko</option>
                        <option value="3">Htu Htu</option>
                    </select>                            
                </div>
                <br>
                <div class="col-md-12" style="text-align:right;">
                   ...

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.addEventListener("DOMContentLoaded", function(event) {
    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.'
            );
});