Mencegah Spasi Kosong Pada Input Text HTML

Ketika saya mengerjakan sebuah projek tiba tiba muncul error array list, setelah di periksa ternyata isinya tidak sesuai. Usut demi usut ketemulah ternyata ada code yang mengunakan spasi kosong. Setelah saat itu baru mikir gimana ya caranya supaya mencegah input dengan spasi kosong.
Ada beberapa cara untuk mengatasi spasi kosong, kita bisa mengunakan replace caracter, sebelum data disimpan spasi kosong itu dihapus dulu. Namun cara ini ada kelemahan, apa kelemahannya? akan sangat mungkin user merasa kaget. Dia memasukan kalimat dengan tambahan spasi tapi ketika tersimpan tidak ada spasinya, hal seperti ini bisa membuat user bertanya-tanya. jadi sebaiknya tidak mengunakan cara ini atau secara langsung menghapus spasinya tanpa ada informasi kepada user.
yang kedua kita juga bisa mengunakan replace carakter mengunakan javascript namun hal ini juga jangan langsung hilangkan tanpa pemberitahuna kepada pengguna.

Dibawah ini akan kita coba buat validasi input, jika user menambahkan spasi kosong maka akan muncul pesan peringatan tapi tanpa kita langsung menghapusnya. Halaman tidak akan jadi disubmit tapi akan di kembalikan ke halaman input supaya pengguna memperbaikinya terlebih dahulu.

Cara seperti ini saya rasa lebih informatif bagi pengguna, karena yang menghilangkan spasi tadi pengguna langsung, system hanya memberikan peringatan bahwa tidak boleh ada spasi kosong.

walaupun hal seperti ini juga ada kelemahan diantaranya user bisa melakukan inspect element dan melakukan edit pada palidasi java script.

kelemahan kedua juga jika user melakukan inactive javascript validasi ini juga tidak akan bekerja.

Mari kita mulai untuk membuatnya, disini kita akan mengunakan HTML dan JAVASCRIPT

Kita buat HTML file.

Untuk pembuatannya saya mengunakan Notepad ++ supaya lebih mudah karena dibatu pewarnaan, berikut codenya.

 <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
</head>
<body>
<form name="myForm">
 Nama : <input type="text" name="name" id="name">
 <input type="button" value="submit" onclick="checkName();">
</form>
</body>
</html>

Selanjutnyakita tambahkan code javascript untuk melakukan validasi tepat dibawah tag <body>

  <script>
function checkName() {
    var x = document.myForm;
    var input = x.name.value;
    var errMsgHolder = document.getElementById('nameErrMsg');
    if (input.length < 3) {
        alert("pajang kurang dari 3");
        return false;
    } else if (!(/^\S{3,}$/.test(input))) {
        alert("Tidak boleh ada spasi");
        return false;
    } else {
        alert("Berhasil !");
        return undefined;
    }
}
</script>

Code Lengkapnya sbb:

  <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
</head>
<body>
<script>
function checkName() {
    var x = document.myForm;
    var input = x.name.value;
    var errMsgHolder = document.getElementById('nameErrMsg');
    if (input.length < 3) {
        alert("pajang kurang dari 3");
        return false;
    } else if (!(/^\S{3,}$/.test(input))) {
        alert("Tidak boleh ada spasi");
        return false;
    } else {
        alert("Berhasil !");
        return undefined;
    }
}
</script>
<form name="myForm">
 Nama : <input type="text" name="name" id="name">
 <input type="button" value="submit" onclick="checkName();">
</form>
</body>
</html>

Hasil tampilan ketika kita melakukan input salah sebagai berikut