JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<input type="text" id="username" placeholder="Username" />
<br/>
<select id="doy">
    <option disabled selected value="">Year of birth</option>
</select>
<br />
<select id="gender">
    <option disabled selected value="">Gender</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
</select>
<br />
<input type="text" value="" id="location" placeholder="Location" />
<br />
<input type="button" id="validate" value="Validate" />

JavaScript

(function () {
    addOptions();
    var validateBtn = document.getElementById("validate");
    validateBtn.addEventListener('click', isValid, false);

    function isValid() {
        var username = document.getElementById('username').value.trim().toLowerCase();
        var doy = document.getElementById("doy").value.trim();
        var gender = document.getElementById("gender").value.trim();
        var location = document.getElementById("location").value.trim();
        /*
         * Regex to validate the username
         * min: 5 chars and max: 26chars
         * allowed chars: A-Za-z0-9-_.
         * Required
         * should be unique
         * Can't be changed in Edit profile page
         */
        var regex = /^[0-9a-zA-Z-_.]{5,26}$/;
        // if(username.length >=5 && username.length <=26 ) {
        if (regex.test(username)) {
            if (doy) {
                if (gender) {
                    if (location) {} else {
                        console.log("Please place the marker in map");
                    }
                } else {
                    console.log("Please select gender");
                }
            } else {
                console.log("Please select a valid year");
            }
        } else {
            console.log("Please enter a valid Username");
        }
        //} else {
        //  console.log("Error");
        //}
    }
    /*
     * Append doy dynamcially and store
     * and selected value should be shown in Edit profile page
     */
    function addOptions() {
        var doy = document.getElementById("doy");
        var currentYear = new Date().getFullYear();
        var maxYear = currentYear - 6;
        var minYear = currentYear - 100;
        for (var i = maxYear; i >= minYear; i--) {
            var doyNode = document.createElement('option');
            doyNode.text = i;
            doyNode.value = i;
            doy.appendChild(doyNode);
        }
    }
})();