Validasi Form Dinamis

Santiago Demitrio · Oct 19, 2011
mas gimana caranya buat validasi form yang dinamis menggunankan javascript
contoh form nya spt ini (transaksi barang)
<HTML>
<HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <SCRIPT language="javascript">
        function addRow(tableID) {
 
            var table = document.getElementById(tableID);
 
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
 
            var colCount = table.rows[0].cells.length;
 
            for(var i=0; i<colCount; i++) {
 
                var newcell = row.insertCell(i);
 
                newcell.innerHTML = table.rows[1].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
        }
 
        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
 
            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    if(rowCount <= 1) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
 
            }
            }catch(e) {
                alert(e);
            }
        }
 
    </SCRIPT>
</HEAD>
<BODY>
 
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
 
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
 
    <TABLE id="dataTable" width="350px" border="1">
        
		<TR>
			<TD></TD>
			<TD><center>NAMA BARANG</center></TD>
			<TD><center>JUMLAH</center></TD>
		</TR>
		<TR>
            <TD><INPUT type="checkbox" name="chk"/></TD>
            <TD><INPUT type="text" name="txt"/></TD>
			<TD><INPUT type="text" name="txt"/></TD>
        </TR>
    </TABLE>
 
</BODY>
</HTML>

validasi yg sy inginkan
1. textbox harus di isi semua (tidak boleh kosong).
2. trus misal kalau ada stok barang A jml nya 3
dan dalam transaksi barang ternyata dipilih barang A dengan jml sama dengan 4
(berarti kan jml barang kurang 1)
nah.. nti muncul peringatan kalau kalau jml barang tidak mencukupi.
apa mungkin validasinya bs dibuat sept itu?

terimakasih sebelumnya mas.. :D
Silahkan login untuk menjawab!
0
Ellyx Christian · Oct 19, 2011 · 0 Suka · 0 Tidak Suka
coba pake cara yang ada di http://www.myphptutorials.com/questions/validasi_146.html
0
Ellyx Christian · Oct 19, 2011 · 0 Suka · 0 Tidak Suka
atau coba http://chandrajatnika.com/2011/07/validasi-form-lebih-mudah-dengan-plugin-jquery-validation-engine/
1
Santiago Demitrio · Oct 20, 2011 · 1 Suka · 0 Tidak Suka
mas saya sudah coba yang ini
http://chandrajatnika.com/2011/07/validasi-form-lebih-mudah-dengan-plugin-jquery-validation-engine/

kira2 jd spt ini

index.php
<HTML>
<HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
	<link href="css/validationEngine.jquery.css" rel="stylesheet" type="text/css">
	<script language="javascript" src="js/jquery-1.6.min.js"></script>
	<script language="javascript" src="js/jquery.validationEngine.js"></script>
	<script language="javascript" src="js/jquery.validationEngine-en.js"></script>
	<script language="javascript" src="js/jquery.form.js"></script>
    <SCRIPT language="javascript">
       function addRow(tableID) 
		{
 			var table = document.getElementById(tableID);
			var rowCount = table.rows.length;
			var row = table.insertRow(rowCount);
			var colCount = table.rows[0].cells.length;
 
			for(var i=0; i<colCount; i++) 
			{
 				var newcell = row.insertCell(i); 
				newcell.innerHTML = table.rows[1].cells[i].innerHTML;
				//alert(newcell.childNodes);
				switch(newcell.childNodes[0].type) 
				{
					case "text":
							newcell.childNodes[0].value = "";
							break;
					case "checkbox":
							newcell.childNodes[0].checked = false;
							break;
					case "select-one":
							newcell.childNodes[0].selectedIndex = 0;
							break;
				}
			}
		addActionToSelect();
		}
		 
	function deleteRow(tableID) 
		{
			try 
			{
				var table = document.getElementById(tableID);
				var rowCount = table.rows.length;
		
				for(var i=0; i<rowCount; i++) 
				{
					var row = table.rows[i];
					var chkbox = row.cells[0].childNodes[0];
					if(null != chkbox && true == chkbox.checked) 
					{
						if(rowCount <= 2) 
							{
								alert("Cannot delete all the rows.");
								break;
							}
						table.deleteRow(i);
						rowCount--;
						i--;
					}
		 
				}
			}
					
			catch(e) 
			{
				alert(e);
			}
		}
		
	 $(function(){
		  /* berikut adalah cara menambahkan fungsi custom utk pengecekan value 
			 dari form dengan ajax */
		  $.validationEngineLanguage.allRules['ajaxCheckJml'] = {
			  "url": "check.php", // URL ajax
			  "alertText": "* jumlah tidak mencukupi", // alert text apabila ajax mengembalikan false
			  "alertTextOk": "* barang tersedia", // alert text apabila ajax mengembalikan true
			  "alertTextLoad": "* Sedang proses check jumlah barang" // alert text ketika proses pengecekan ajax sedang berlangsung
		  }
		  /* pengecekan email url-nya sama dengan pengecekan nim, namun fieldId yang akan dikirim akan
			 menjadikan perbedaan ketika pengecekan pada file check.php */
		  $.validationEngineLanguage.allRules['ajaxCheckEmail'] = {
			  "url": "check.php",		  
			  "alertText": "* Email ini sudah ada sebelumnya",
			  "alertTextOk": "* Email tersedia",
			  "alertTextLoad": "* Sedang proses check Email"
		  }
		  $('#formBrg')
			.validationEngine() // fungsi untuk menambahkan feature validation ke form
			.ajaxForm({ // ketika validasi berhasil, inputan form akan dikirim via ajax dengan plugin jQuery ajax form
				success: function(response){
					alert(response);
					$('#btnReset').click(); // kosongkan form setelah selesai menyimpan data
				}
			  });
	  });
    </SCRIPT>
</HEAD>
<BODY>
 <form action="save.php" method="post" id="formBrg">
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
 
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
 
    <TABLE id="dataTable" width="350px" border="1">
        
		<TR>
			<TD>cek</TD>
			<TD><center>NAMA BARANG</center></TD>
			<TD><center>JUMLAH</center></TD>
		</TR>
		<TR>
			<TD><INPUT type="checkbox" name="chk"/></TD>
            <TD><input type="text" name="NAMA_BRG[]" id="NAMA_BRG[]" class="validate[required]" /></TD>
			<TD><input type="text" name="JUMLAH[]" id="JUMLAH[]" class="validate[required,ajax[ajaxCheckJml]]"  /></TD>
			
        </TR>
		
			<input type="submit" name="submit" value="Simpan" /><input type="reset" value="Batal" id="btnReset" />
		
    </TABLE>
 </form>
</BODY>
</HTML>


Hasilnya :
1. tooltips validasi bisa keluar tapi hanya untuk baris pertama sj, jika di add row tooltips validasi sudah tidak muncul lg di baris ke 2.

2. untuk cek validasi ke database tidak bisa jalan karena id texboxnya menggunakan array
JUMLAH[]
<input type="text" name="JUMLAH[]" id="JUMLAH[]" class="validate[required,ajax[ajaxCheckJml]]"

trus nti di check.php ada ini
$field = $_GET['fieldId']; 
$value = $_GET['fieldValue'];
	
	require_once 'connect.php';
	$query = "SELECT * FROM sukucadang WHERE $field <= '$value'";
	$ditemukan = mysql_num_rows(mysql_query($query)) > 0;
	
	$result  = array($field,!$ditemukan);
	echo json_encode($result);

klo id nya array JUMLAH[] nti di query todak bisa di gunakan.
kira2 gimana mas? :D