即使我填写了字段，我的验证仍然会给我警报

Question

I have a form like this:

<form id="formDaftar" onsubmit="return daftarClick()" method="post">
<table id="tableFormDaftar" border="0" width="400px" height="300px">
<tr>
<td>Nama</td>
<td><input type="text" name="nama" id="nama" size="39"/></td>
</tr>

<tr>
<td>Alamat</td>
<td><textarea cols="40" rows="4" name="alamat" id="alamat">
</textarea></td>
</tr>
<tr>
<td>Tempat/Tanggal Lahir</td>
<td><input name="tempatLahir" id="tempatLahir" size="39" type="text"/></td>
</tr>

<tr>
<td>Jenis Kelamin</td>
<td><input type="radio" id="radio1" name="gender" id="gender1"/>Laki-laki
    <input type="radio" id="radio1" name="gender" id="gender2"/>Perempuan
</td>
</tr>

<tr>
<td>Pekerjaan</td>
<td><input name="pekerjaan" id="pekerjaan" size="39"/></td>
</tr>

<tr>
<td>Status</td>
<td>
<select id="status" name="status">
<option selected="selected">Lajang</option>
<option>Menikah</option>
<option>Duda</option>
<option>Janda</option>
</select></td>
</tr>

<tr>
<td>Agama</td>
<td><select id="agama" name="agama">
<option>Islam</option>
<option selected="selected">Kristen</option>
<option>Katholik</option>
<option>Budha</option>
<option>Hindu</option>
</select></td>
</tr>
<tr>
<td>Kewarganegaraan</td>
<td><select id="kwn">
<option selected="selected">Indonesia</option>
<option>Asing</option>
</select></td>
</tr>
<tr>
<td colspan="2" id="colbutton"> <button name="masukkan" type="submit" id="masukkan">Masukkan</button> <button type="reset" name="batalkan" id="batalkan">Batalkan</button></td>
</tr>
</table></form>

I have a script like this:

var nama = document.getElementById("nama").value;
var alamat = document.getElementById("alamat").value;
var tempatLahir = document.getElementById("tempatLahir").value;
var gender;

if (document.getElementById("gender1").checked){
    gender = document.getElementById("gender1").value;
}
else if (document.getElementById("gender2").checked){
    gender = document.getElementById("gender2").value;
}

var a = document.getElementById("agama");
var agama = a.options[a.selectedIndex].text;

var pekerjaan = document.getElementById("pekerjaan").value;

var b = document.getElementById("status");
var status = b.options[b.selectedIndex].text;

var c = document.getElementById("kwn");
var kwn = c.options[c.selectedIndex].text;

function daftarClick(){

    if (nama == ""){
        alert("Nama harus diisi!"); 
        return false;
    }
    else if (alamat == ""){
        alert("Alamat harus diisi!");
        return false;
    }
    else if (tempatLahir == ""){
        alert("Tempat/Tanggal Lahir harus diisi!");
        return false;
    }
    else if(!document.getElementById("gender1").checked && !document.getElementById("gender2").checked){
        alert("Jenis Kelamin harus dipilih!");
        return false;
    }

}

The problem is that even though I have filled the fields, it keeps showing the alert() saying that I need to fill the fields.

I have set the validation which will show an alert if the user had not put any letters in the fields but no matter what I put in the fields, it keeps saying that I haven't put it there. What did I get wrong here?

Answer 1

Try this:

<script type="text/javascript">


function daftarClick(){

    var nama = document.getElementById("nama").value;
    var alamat = document.getElementById("alamat").value;
    var tempatLahir = document.getElementById("tempatLahir").value;
    var gender;

    if (document.getElementById("gender1").checked){
        gender = document.getElementById("gender1").value;
    }
    else if (document.getElementById("gender2").checked){
        gender = document.getElementById("gender2").value;
    }

    var a = document.getElementById("agama");
    var agama = a.options[a.selectedIndex].text;

    var pekerjaan = document.getElementById("pekerjaan").value;

    var b = document.getElementById("status");
    var status = b.options[b.selectedIndex].text;

    var c = document.getElementById("kwn");
    var kwn = c.options[c.selectedIndex].text;




    if (nama == ""){
        alert("Nama harus diisi!"); 
        return false;
    }
    else if (alamat == ""){
        alert("Alamat harus diisi!");
        return false;
    }
    else if (tempatLahir == ""){
        alert("Tempat/Tanggal Lahir harus diisi!");
        return false;
    }
    else if(!document.getElementById("gender1").checked && !document.getElementById("gender2").checked){
        alert("Jenis Kelamin harus dipilih!");
        return false;
    }

}
</script>

EDIT: The checkboxes in the HTML have multiple id attributes, which is an error, and thus document.getElementById cannot find them.

<form id="formDaftar" onsubmit="return daftarClick()" method="post">
<table id="tableFormDaftar" border="0" width="400px" height="300px">
<tr>
<td>Nama</td>
<td><input type="text" name="nama" id="nama" size="39"/></td>
</tr>

<tr>
<td>Alamat</td>
<td><textarea cols="40" rows="4" name="alamat" id="alamat">
</textarea></td>
</tr>
<tr>
<td>Tempat/Tanggal Lahir</td>
<td><input name="tempatLahir" id="tempatLahir" size="39" type="text"/></td>
</tr>

<tr>
<td>Jenis Kelamin</td>
<!-- Fix is here, id="radio1" removed from both -->
<td><input type="radio" name="gender" id="gender1"/>Laki-laki
    <input type="radio" name="gender" id="gender2"/>Perempuan        
</td>
</tr>

<tr>
<td>Pekerjaan</td>
<td><input name="pekerjaan" id="pekerjaan" size="39"/></td>
</tr>

<tr>
<td>Status</td>
<td>
<select id="status" name="status">
<option selected="selected">Lajang</option>
<option>Menikah</option>
<option>Duda</option>
<option>Janda</option>
</select></td>
</tr>

<tr>
<td>Agama</td>
<td><select id="agama" name="agama">
<option>Islam</option>
<option selected="selected">Kristen</option>
<option>Katholik</option>
<option>Budha</option>
<option>Hindu</option>
</select></td>
</tr>
<tr>
<td>Kewarganegaraan</td>
<td><select id="kwn">
<option selected="selected">Indonesia</option>
<option>Asing</option>
</select></td>
</tr>
<tr>
<td colspan="2" id="colbutton"> <button name="masukkan" type="submit" id="masukkan">Masukkan</button> <button type="reset" name="batalkan" id="batalkan">Batalkan</button></td>
</tr>
</table></form>

Answer 2

It is because your variables were declared at page load so then your inputs were empty and the variables got empty values

Change it to

<script type="text/javascript">

function daftarClick(){
    var nama = document.getElementById("nama").value;
    var alamat = document.getElementById("alamat").value;
    var tempatLahir = document.getElementById("tempatLahir").value;
    var gender;

    if (document.getElementById("gender1").checked){
        gender = document.getElementById("gender1").value;
    }
    else if (document.getElementById("gender2").checked){
        gender = document.getElementById("gender2").value;
    }

    var a = document.getElementById("agama");
var agama = a.options[a.selectedIndex].text;

var pekerjaan = document.getElementById("pekerjaan").value;

var b = document.getElementById("status");
var status = b.options[b.selectedIndex].text;

var c = document.getElementById("kwn");
var kwn = c.options[c.selectedIndex].text;


if (nama == ""){
    alert("Nama harus diisi!"); 
    return false;
}
else if (alamat == ""){
    alert("Alamat harus diisi!");
    return false;
}
else if (tempatLahir == ""){
    alert("Tempat/Tanggal Lahir harus diisi!");
    return false;
}
else if(!document.getElementById("gender1").checked && !document.getElementById("gender2").checked){
    alert("Jenis Kelamin harus dipilih!");
    return false;
}

}
</script>

Answer 3

check this I think it is working as you are expecting

https://jsbin.com/ragoces/edit?html,js,output

var nama = document.getElementById("nama");
var alamat = document.getElementById("alamat");
var tempatLahir = document.getElementById("tempatLahir");
var gender;

if (document.getElementById("gender1").checked){
    gender = document.getElementById("gender1").value;
}
else if (document.getElementById("gender2").checked){
    gender = document.getElementById("gender2").value;
}

var a = document.getElementById("agama");
var agama = a.options[a.selectedIndex].text;

var pekerjaan = document.getElementById("pekerjaan").value;

var b = document.getElementById("status");
var status = b.options[b.selectedIndex].text;

var c = document.getElementById("kwn");
var kwn = c.options[c.selectedIndex].text;


function daftarClick(){

if (nama.value === ""){
    alert("Nama harus diisi!"); 
    return false;
}
else if (alamat.value === ""){
    alert("Alamat harus diisi!");
    return false;
}
else if (tempatLahir.value === ""){
    alert("Tempat/Tanggal Lahir harus diisi!");
    return false;
}
else if(!document.getElementById("gender1").checked &&           !document.getElementById("gender2").checked){
alert("Jenis Kelamin harus dipilih!");
return false;
 }

}