Hi Guys,, I'm trying to validation more than 19 textbox in ASP.NET Web Form using javascript. I'm using client side validation but not working and then I'm trying to validation using server side validation but not working too. Where is better validation client site or server side validation and Why if using many logical if statement not working. Mybe any another idea, Anny help could be appriciate
This is the modal for input data
<!-- Start The Modal AddDataPinjaman --> <div class="modal fade" data-keyboard="false" id="ModalAddDataPinjaman"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header bg bg-success"> <div align="center"> <h4 class="modal-title">Add Data Pinjaman</h4> </div> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <div align="center"> <div class="text text-danger"> <h5> <b> <asp:Label ID="LblAlert" runat="server" Text="" Visible="false"></asp:Label> <asp:Label ID="LblAlertCheckPinjamanBelumLunas" runat="server" Text="" Visible="false"></asp:Label> <asp:Label ID="LblPesanMaksimalJmlPinjaman" runat="server" Text="" Visible="false"></asp:Label> </b> </h5> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="id_pinjaman"> ID Pinjaman</label> <asp:TextBox ID="txtid_pinjaman" runat="server" CssClass="form-control" placeholder="Enter ID Pinjaman" ReadOnly="true"></asp:TextBox> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="tanggal_pinjam"> Tanggal Pinjam</label> <asp:TextBox ID="txttanggal_pinjam" runat="server" CssClass="form-control" placeholder="Enter Tanggal Pinjam"></asp:TextBox> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="id_anggota"> ID Anggota</label> <asp:UpdatePanel ID="UpdatePanel7" runat="server"> <ContentTemplate> <div class="input-group"> <asp:TextBox ID="txtid_anggota" runat="server" CssClass="form-control" placeholder="Enter ID Anggota"></asp:TextBox> <div class="input-group-append"> <asp:Button ID="btnAddCariAnggota" CssClass="btn btn-warning" runat="server" Text="Cari Data Anggota" OnClick="btnAddCariAnggota_Click" /> </div> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="txtid_anggota" EventName="Click" /> </Triggers> </asp:UpdatePanel> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="id_anggota"> ID Pengaturan</label> <asp:UpdatePanel ID="UpdatePanel8" runat="server"> <ContentTemplate> <div class="input-group"> <asp:TextBox ID="txt_CariIDPengaturan" runat="server" CssClass="form-control" placeholder="Enter ID Pengaturan"></asp:TextBox> <div class="input-group-append"> <asp:Button ID="BtnCariIDPengaturan" CssClass="btn btn-warning" runat="server" Text="Cari ID Pengaturan" OnClick="BtnCariIDPengaturan_Click" /> </div> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="BtnCariIDPengaturan" EventName="Click" /> </Triggers> </asp:UpdatePanel> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="tanggal_pinjam"> Pinjaman Ke</label> <asp:TextBox ID="txtPinjamanKe" runat="server" CssClass="form-control" placeholder="Enter Pinjaman Ke" ReadOnly="true"></asp:TextBox> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="tanggal_pinjam"> Jumlah Maksimal Pinjaman</label> <asp:TextBox ID="txtJumlahMaksimalPinjaman" runat="server" CssClass="form-control" placeholder="Enter Jumlah Maksimal Pinjaman" ReadOnly="true"></asp:TextBox> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="tanggal_pinjam"> Jumlah Sisa Pinjaman</label> <asp:TextBox ID="txtJumlahSisaPinjamanKe" runat="server" CssClass="form-control" placeholder="Enter Jumlah Sisa Pinjaman" ReadOnly="true"></asp:TextBox> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="tanggal_pinjam"> Set Tanggal Jatuh Tempo</label> <asp:TextBox ID="txtSetTglJatuhTempo" runat="server" CssClass="form-control" placeholder="Enter Jumlah Maksimal Pinjaman"></asp:TextBox> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="nama_anggota"> Nama Anggota</label> <asp:TextBox ID="txtnama_anggota" runat="server" CssClass="form-control" placeholder="Enter Nama Anggota" ReadOnly="true"></asp:TextBox> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="saldo"> Jumlah Saldo (Rp.)</label> <div class="input-group"> <span class="input-group-text">Rp.</span> <asp:TextBox ID="txt_saldo" runat="server" CssClass="form-control" placeholder="Enter Saldo" ReadOnly="true"></asp:TextBox> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="bunga_per_tahun"> Bunga Per Tahun (%)</label> <div class="input-group"> <asp:TextBox ID="txtbunga_per_tahun" runat="server" CssClass="form-control" placeholder="Enter Bunga Per Tahun (%)"></asp:TextBox> <span class="input-group-text">%</span> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="lama_cicilan"> Lama Cicilan (Bulan)</label> <div class="input-group"> <asp:TextBox ID="txtlama_cicilan" runat="server" CssClass="form-control" placeholder="Enter Lama Cicilan"></asp:TextBox> <span class="input-group-text">Bulan</span> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="jumlah_pinjaman"> Jumlah Pinjaman (Rp.)</label> <div class="input-group"> <span class="input-group-text">Rp.</span> <asp:TextBox ID="txtjumlah_pinjaman" runat="server" CssClass="form-control" placeholder="Enter Jumlah Pinjaman (Rp.)"></asp:TextBox> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="angsuran"> Jumlah Angsuran Per Bulan (Rp.)</label> <div class="input-group"> <span class="input-group-text">Rp.</span> <div class="input-group-append"> <asp:TextBox ID="txtangsuran" runat="server" CssClass="form-control" placeholder="Enter Angsuran" ReadOnly="true"></asp:TextBox> <asp:UpdatePanel ID="UpdatePanel5" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional"> <ContentTemplate> <asp:Button ID="BtnHitungAngsuran" CssClass="btn btn-warning" runat="server" Text="Hitung" UseSubmitBehavior="false" CausesValidation="false" OnClick="BtnHitungAngsuran_Click" /> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="BtnHitungAngsuran" EventName="Click" /> </Triggers> </asp:UpdatePanel> </div> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="sisa_pinjaman"> Sisa Pinjaman (Rp.)</label> <div class="input-group"> <span class="input-group-text">Rp.</span> <asp:TextBox ID="txtsisa_pinjaman" runat="server" CssClass="form-control" placeholder="Enter Sisa Pinjaman (Rp.)" ReadOnly="true"></asp:TextBox> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="status_pinjaman"> Status Pinjaman</label> <asp:DropDownList ID="DropDownList_txtstatus_pinjaman" CssClass="form-control" runat="server"> <asp:ListItem Value="">Pilihan</asp:ListItem> <asp:ListItem Value="LUNAS">LUNAS</asp:ListItem> <asp:ListItem Value="BELUM LUNAS">BELUM LUNAS</asp:ListItem> </asp:DropDownList> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="id_user"> ID Admin</label> <div class="input-group"> <asp:TextBox ID="txt_add_id_user" runat="server" CssClass="form-control" placeholder="Enter ID Admin"></asp:TextBox> <div class="input-group-append"> <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional"> <ContentTemplate> <asp:Button ID="btnAddCariAdmin" UseSubmitBehavior="false" CausesValidation="false" CssClass="btn btn-warning" runat="server" Text="Cari Data Admin" OnClick="btnAddCariAdmin_Click" /> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnAddCariAdmin" EventName="Click" /> </Triggers> </asp:UpdatePanel> </div> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="nama_user"> Nama User</label> <asp:TextBox ID="txtnama_user" runat="server" CssClass="form-control" placeholder="Enter Nama User" ReadOnly="true"></asp:TextBox> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="id_perusahaan"> ID Perusahaan</label> <div class="input-group"> <asp:TextBox ID="txt_add_id_perusahaan" runat="server" CssClass="form-control" placeholder="Enter ID Perusahaan"></asp:TextBox> <div class="input-group-append"> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <asp:Button ID="BtnCariDataPerusahaan" UseSubmitBehavior="false" CausesValidation="false" CssClass="btn btn-warning" runat="server" Text="Cari Data Perusahaan" OnClick="BtnCariDataPerusahaan_Click" /> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="BtnCariDataPerusahaan" EventName="Click" /> </Triggers> </asp:UpdatePanel> </div> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="nama_perusahaan"> Nama Perusahaan</label> <asp:TextBox ID="txtnama_perusahaan" runat="server" CssClass="form-control" placeholder="Enter Nama Perusahaan" ReadOnly="true"></asp:TextBox> </div> </div> <div class="col-md-6"> <div class="form-group"> <div align="center"> <asp:Button ID="btnModalAddDataPinjaman" OnClientClick="return ValidasiPinjaman();" OnClick="btnModalAddDataPinjaman_Click" CssClass="btn btn-success btn-block" runat="server" Text="Save Data Pinjaman" /> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <div align="center"> <asp:Button ID="BtnBatal" OnClick="BtnBatal_Click" CssClass="btn btn-danger btn-block" runat="server" Text="Cancel" /> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- End The Modal AddDataPinjaman -->
Thi is the Validation
<script type="text/javascript" lang="javascript"> $(document).ready(function () { $("[id*=btnModalAddDataPinjaman]").click(function () { var tanggal_pinjam = $("[id*=txttanggal_pinjam]").val(); var id_anggota = $("[id*=txtid_anggota]").val(); var nama_anggota = $("[id*=txtnama_anggota]").val(); var bunga_per_tahun = $("[id*=txtbunga_per_tahun]").val(); var lama_cicilan = $("[id*=txtlama_cicilan]").val(); var jumlah_pinjaman = $("[id*=txtjumlah_pinjaman]").val(); var angsuran = $("[id*=txtangsuran]").val(); var sisa_pinjaman = $("[id*=txtsisa_pinjaman]").val(); var DropDownList_txtstatus_pinjaman = $("[id*=DropDownList_txtstatus_pinjaman]").val(); var id_user = $("[id*=txt_add_id_user]").val(); var nama_user = $("[id*=txtnama_user]").val(); var nama_anggota = $("[id*=txtnama_anggota]").val(); var SetTglJatuhTempo = $("[id*=txtSetTglJatuhTempo]").val(); var PinjamanKe = $("[id*=txtPinjamanKe]").val(); var sisa_pinjaman = $("[id*=txtsisa_pinjaman]").val(); var JumlahSisaPinjamanKe = $("[id*=txtJumlahSisaPinjamanKe]").val(); var JumlahMaksimalPinjaman = $("[id*=txtJumlahMaksimalPinjaman]").val(); var saldo = $("[id*=txt_saldo]").val(); var IDPengaturan = $("[id*=txt_CariIDPengaturan]").val(); if (id_pinjaman == "" && tanggal_pinjam == "" && id_anggota == "" && nama_anggota == "" && bunga_per_tahun == "" && lama_cicilan == "" && jumlah_pinjaman == "" && angsuran == "" && sisa_pinjaman == "" && DropDownList_txtstatus_pinjaman == "" && id_user == "" && nama_user == "" && id_perusahaan == "" && nama_perusahaan == "" && nama_anggota == "" && SetTglJatuhTempo == "" && PinjamanKe == "" && sisa_pinjaman == "" && JumlahSisaPinjamanKe == "" && JumlahMaksimalPinjaman == "" && saldo == "" && IDPengaturan == "") { document.getElementById("<%=txttanggal_pinjam.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txttanggal_pinjam.ClientID %>").focus(); document.getElementById("<%=txtid_anggota.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtnama_anggota.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtbunga_per_tahun.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtlama_cicilan.ClientID%>").style.border = "2px solid red"; document.getElementById("<%=txtjumlah_pinjaman.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtangsuran.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtsisa_pinjaman.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=DropDownList_txtstatus_pinjaman.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txt_add_id_user.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtnama_user.ClientID %>").focus(); document.getElementById("<%=txtnama_anggota.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtSetTglJatuhTempo.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtPinjamanKe.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtsisa_pinjaman.ClientID%>").style.border = "2px solid red"; document.getElementById("<%=txtJumlahSisaPinjamanKe.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtJumlahMaksimalPinjaman.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txt_saldo.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txt_CariIDPengaturan.ClientID %>").style.border = "2px solid red"; alert('Tolong dilengkapi seluruh isian data !!!'); return false } if (tanggal_pinjam == "") { alert("Tanggal Pinjaman tidak boleh kosong !!!"); document.getElementById("<%=txttanggal_pinjam.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txttanggal_pinjam.ClientID %>").focus(); return false } else { document.getElementById("<%=txttanggal_pinjam.ClientID %>").style.border = ""; } if (id_anggota == "") { alert("ID Anggota tidak boleh kosong !!!"); document.getElementById("<%=txtid_anggota.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtid_anggota.ClientID %>").focus(); return false } else { document.getElementById("<%=txtid_anggota.ClientID %>").style.border = ""; } if (nama_anggota == "") { alert("Nama Anggota tidak boleh kosong !!!"); document.getElementById("<%=txtnama_anggota.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtnama_anggota.ClientID %>").focus(); return false } else { document.getElementById("<%=txtnama_anggota.ClientID %>").style.border = ""; } if (bunga_per_tahun == "") { alert("Bunga per tahun tidak boleh kosong !!!"); document.getElementById("<%=txtbunga_per_tahun.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtbunga_per_tahun.ClientID %>").focus(); return false } else { document.getElementById("<%=txtbunga_per_tahun.ClientID %>").style.border = ""; } if (lama_cicilan == "") { alert("Lama Cicilan tidak boleh kosong !!!"); document.getElementById("<%=txtlama_cicilan.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtlama_cicilan.ClientID %>").focus(); return false } else { document.getElementById("<%=txtlama_cicilan.ClientID %>").style.border = ""; } if (jumlah_pinjaman == "") { alert("Jumlah Pinjaman tidak boleh kosong !!!"); document.getElementById("<%=txtjumlah_pinjaman.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtjumlah_pinjaman.ClientID %>").focus(); return false } else { document.getElementById("<%=txtjumlah_pinjaman.ClientID %>").style.border = ""; } if (angsuran == "") { alert("Angsuran tidak boleh kosong !!!"); document.getElementById("<%=txtangsuran.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtangsuran.ClientID %>").focus(); return false } else { document.getElementById("<%=txtangsuran.ClientID %>").style.border = ""; } if (sisa_pinjaman == "") { alert("Sisa Pinjaman tidak boleh kosong !!!"); document.getElementById("<%=txtsisa_pinjaman.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtsisa_pinjaman.ClientID %>").focus(); return false } else { document.getElementById("<%=txtsisa_pinjaman.ClientID %>").style.border = ""; } if (DropDownList_txtstatus_pinjaman == "") { alert("Status Pinjaman tidak boleh kosong !!!"); document.getElementById("<%=DropDownList_txtstatus_pinjaman.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=DropDownList_txtstatus_pinjaman.ClientID %>").focus(); return false } else { document.getElementById("<%=DropDownList_txtstatus_pinjaman.ClientID %>").style.border = ""; } if (id_user == "") { alert("ID Admin tidak boleh kosong !!!"); document.getElementById("<%=txt_add_id_user.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txt_add_id_user.ClientID %>").focus(); return false } else { document.getElementById("<%=txt_add_id_user.ClientID %>").style.border = ""; } if (nama_user == "") { alert("Nama Admin tidak boleh kosong !!!"); document.getElementById("<%=txtnama_user.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtnama_user.ClientID %>").focus(); return false } else { document.getElementById("<%=txtnama_user.ClientID %>").style.border = ""; } if (nama_anggota == "") { alert("Nama Anggota tidak boleh kosong !!!"); document.getElementById("<%=txtnama_anggota.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtnama_anggota.ClientID %>").focus(); return false } else { document.getElementById("<%=txtnama_anggota.ClientID %>").style.border = ""; } if (SetTglJatuhTempo == "") { alert("Atur Tanggal Jatuh Tempo tidak boleh kosong !!!"); document.getElementById("<%=txtSetTglJatuhTempo.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtSetTglJatuhTempo.ClientID %>").focus(); return false } else { document.getElementById("<%=txtSetTglJatuhTempo.ClientID %>").style.border = ""; } if (PinjamanKe == "") { alert("Pinjaman Ke tidak boleh kosong !!!"); document.getElementById("<%=txtPinjamanKe.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtPinjamanKe.ClientID %>").focus(); return false } else { document.getElementById("<%=txtPinjamanKe.ClientID %>").style.border = ""; } if (sisa_pinjaman == "") { alert("Sisa Pinjaman tidak boleh kosong !!!"); document.getElementById("<%=txtsisa_pinjaman.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtsisa_pinjaman.ClientID %>").focus(); return false } else { document.getElementById("<%=txtsisa_pinjaman.ClientID %>").style.border = ""; } if (JumlahSisaPinjamanKe == "") { alert("Jumlah Sisa Pinjaman Ke tidak boleh kosong !!!"); document.getElementById("<%=txtJumlahSisaPinjamanKe.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtJumlahSisaPinjamanKe.ClientID %>").focus(); return false } else { document.getElementById("<%=txtJumlahSisaPinjamanKe.ClientID %>").style.border = ""; } if (JumlahMaksimalPinjaman == "") { alert("Jumlah Maksimal Pinjaman tidak boleh kosong !!!"); document.getElementById("<%=txtJumlahMaksimalPinjaman.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txtJumlahMaksimalPinjaman.ClientID %>").focus(); return false } else { document.getElementById("<%=txtJumlahMaksimalPinjaman.ClientID %>").style.border = ""; } if (saldo == "") { alert("Saldo tidak boleh kosong !!!"); document.getElementById("<%=txt_saldo.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txt_saldo.ClientID %>").focus(); return false } else { document.getElementById("<%=txt_saldo.ClientID %>").style.border = ""; } if (IDPengaturan == "") { alert("ID Pengaturan tidak boleh kosong !!!"); document.getElementById("<%=txt_CariIDPengaturan.ClientID %>").style.border = "2px solid red"; document.getElementById("<%=txt_CariIDPengaturan.ClientID %>").focus(); return false } else { document.getElementById("<%=txt_CariIDPengaturan.ClientID %>").style.border = ""; } } }); </script>