Validasi Form Login Hotspot

<!-- START FORM -->
        <div class="form-log">
            <div class="form-wrapper">
                <h3 class="mbr-section-subtitle align-center mbr-fonts-style display-5" style="color: #fff; margin-bottom:10px">
                    MASUKKAN KODE VOUCHER
                </h3>
                        $(if error)
                            <div id="alert" class="alert alert-danger box-alert">
                               $(error)
                               <script type="text/javascript">
                                    // CHANGE AUTHENTICATION ERROR MESSAGE
                                    var error = "$(error)";
                                    var error1a = "no valid profile found";
                                    var error1b = "RADIUS: no valid profile found";
                                    var error2a = "user &lt;$(username)&gt; not found";
                                    var error2b = "RADIUS: user &lt;$(username)&gt; not found";
                                    var error3a = "invalid username or password";
                                    var error3b = "RADIUS: invalid username or password";
                                    var error4 = "no more sessions are allowed for user $(username)";

                                    if (error == error1a || error == error1b){
                                        document.getElementById("alert").innerHTML = "Masa berlaku voucher dengan kode <span style='text-transform: uppercase; font-weight: bold;'>$(username)</span> telah habis. Silahkan gunakan voucher yang lain.";
                                    } else if (error == error2a || error == error2b){
                                        document.getElementById("alert").innerHTML = "Voucher dengan kode <span style='text-transform: uppercase; font-weight: bold;'>$(username)</span> tidak ditemukan/telah dihapus. Cek kembali kode voucher atau gunakan kode voucher yang lain.";
                                    } else if (error == error3a || error == error3b){
                                        document.getElementById("alert").innerHTML = "Username atau password salah. Periksa kembali informasi login anda";
                                    } else if (error == error4){
                                        document.getElementById("alert").innerHTML = "Voucher dengan kode <span style='text-transform: uppercase; font-weight: bold;'>$(username)</span> sudah digunakan di perangkat lain. Tidak ada lagi sesi yang diperbolehkan. Jika anda mengalami kesulitan login, silahkan hubungi kontak hotspot (0858 8300 7460)";
                                    } else {
                                        document.getElementById("alert").innerHTML = "$(error)";
                                    }
                                </script>
                            </div>
                        $(endif)
                        $(if chap-id)
                            <form name="sendin" action="$(link-login-only)" method="post">
                                <input type="hidden" name="username" />
                                <input type="hidden" name="password" />
                                <input type="hidden" name="dst" value="$(link-orig)" />
                                <input type="hidden" name="popup" value="true" />
                            </form>
                            <script type="text/javascript" src="/md5.js"></script>

                            <script type="text/javascript">
                                // LOWERCASE INPUT
                                function doLogin() {
                                document.sendin.username.value = document.login.username.value.toLowerCase();
                                document.sendin.password.value = hexMD5('$(chap-id)' + document.login.username.value.toLowerCase() + '$(chap-challenge)');
                                document.sendin.submit();
                                return false;
                                }
                                // NO SPACEBAR
                                $(function(){$("input#username").on({
                                    keydown: function(e){
                                    if (e.which === 32)
                                    return false;
                                    },
                                    change: function() {
                                    this.value = this.value.replace(/\s/g, "");
                                    }
                                });
                                });
                                // CHANGE VALIDATION ERROR MESSAGE
                                $(function(){$("form input[type=text]").on("change invalid", function() {
                                var textfield = $(this).get(0);
                                textfield.setCustomValidity("");

                                if (!textfield.validity.valid) {
                                  textfield.setCustomValidity("Silahkan masukkan kode voucher anda");
                                }
                                })
                                });
                            </script>

                        <form action="$(link-login-only)" name="login" id="loginForm" method="post" $(if chap-id) onSubmit="return doLogin()" $(endif)>
                            <input type="hidden" name="dst" value="$(link-orig)"/>
                            <input type="hidden" name="popup" value="true"/>

                            <input style="text-transform: uppercase; text-align: center; font-weight: bold;  letter-spacing: 0.2em;" type="text" id="username" class="form-control" placeholder="kode voucher" onblur="password.value=username.value" value="$(username)" autofocus required/>
                            <input style="text-transform: uppercase; text-align: center; font-weight: bold;" type="hidden" class="form-control" placeholder="Password" required="" id="password" />

                            <button type="submit" class="btn btn-secondary">MASUK</button>
                        </form>
                    </div>
            </div>
<!-- END FORM -->