Tutorial PHP Pemula & Mahir

Question

Cara validasi angka lebih dari satu, dengan javacsript.

Bella · Jul 29, 2011

Mas saya mau tanya, cara memvalidasi angka yang lebih dari pada satu dengan menggunakan javacript bagaimana ya .. ??

Misalkan :

<input type="text" name="txtNil_1">
<input type="text" name="txtNil_2">
<Input type="text" name="txtNil_3">
<input type="text" name="txtNil_4">
bla ...bla ... bla ...

Nah ..., keempat inputan tersebut, harus berupa angka (0-9).
mohon penjelasannya Mas ya ...

Silahkan login untuk menjawab!

Answer 1

0

Ellyx Christian · Jul 29, 2011 · 0 Suka · 0 Tidak Suka

saya rasa caranya sama dengan yang di http://www.myphptutorials.com/questions/validasi-angka-menggunakan-javascript_51.html. Kalau dengan javascript murni tinggal ubah input text kamu jadi seperti ini:
<input type="text" name="txtNil_1" id="txtNil_1"/>
<input type="text" name="txtNil_2" id="txtNil_2"/>
<Input type="text" name="txtNil_3" id="txtNil_3"/>
<input type="text" name="txtNil_4" id="txtNil_4"/>
Valisadinya akan seperti:

function validate(){
var txt = document.getElementById('txtNil_1').value;
if(isNaN(parseInt(txt)) || parseInt(txt1)< 0 || parseInt(txt) > 9){
	 alert('Nilai yang diperbolehkan 0-9');
	 document.getElementById('txtNil_1').focus();
	 return false;
}
txt = document.getElementById('txtNil_2').value;
if(isNaN(parseInt(txt)) || parseInt(txt1)< 0 || parseInt(txt) > 9){
	 alert('Nilai yang diperbolehkan 0-9');
	 document.getElementById('txtNil_2').focus();
	 return false;
}
txt = document.getElementById('txtNil_3').value;
if(isNaN(parseInt(txt)) || parseInt(txt1)< 0 || parseInt(txt) > 9){
	 alert('Nilai yang diperbolehkan 0-9');
	 document.getElementById('txtNil_3').focus();
	 return false;
}
txt = document.getElementById('txtNil_4').value;
if(isNaN(parseInt(txt)) || parseInt(txt1)< 0 || parseInt(txt) > 9){
	 alert('Nilai yang diperbolehkan 0-9');
	 document.getElementById('txtNil_4').focus();
	 return false;
}
}

kalau pake jquery[/code] ubah text box jadi
<input type="text" name="txtNil_1" class="valid"/>
<input type="text" name="txtNil_2" class="valid"/>
<Input type="text" name="txtNil_3" class="valid"/>
<input type="text" name="txtNil_4" class="valid"/>

<!-- tambahkan jquery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
function validate(){
$(".alerts").remove();
var valid = true;
$(".valid").each(function(){
	var txt = parseInt($(this).val());
	if(isNaN(txt) || txt <= 0 || txt > 100){
		$('<span class="alerts" style="color:red">Nilai yang diperbolehkan 0-9</span>')
		.insertAfter($(this));
		valid = false;
	}
});
return valid;
}
</script>

Answer 2

0

Bella · Jul 30, 2011 · 0 Suka · 0 Tidak Suka

Terima kasih Mas atas bantuannya, namun setelah saya terapkan kok nggak ada reaksi ya pada javascriptnya .. ??? ketika saya inputkan selain angka, kok nggak tampil alertnya ... ?? bingung nih Mas ...

untuk Javascriptnya :

function CheckNum() {
var txt = document.getElementById('txtAnakke').value;
if(isNaN(parseInt(txt)) || parseInt(txt1)< 0 || parseInt(txt) > 9){
alert('Nilai yang diperbolehkan 0-9');
document.getElementById('txtAnakke').focus();
return false;
}

txt = document.getElementById('txtDari').value;
if(isNaN(parseInt(txt)) || parseInt(txt1)< 0 || parseInt(txt) > 9){
alert('Nilai yang diperbolehkan 0-9');
document.getElementById('txtDari').focus();
return false;
}

txt = document.getElementById('txtTinggi').value;
if(isNaN(parseInt(txt)) || parseInt(txt1)< 0 || parseInt(txt) > 9){
alert('Nilai yang diperbolehkan 0-9');
document.getElementById('txtTinggi').focus();
return false;
}

txt = document.getElementById('txtBerat').value;
if(isNaN(parseInt(txt)) || parseInt(txt1)< 0 || parseInt(txt) > 9){
alert('Nilai yang diperbolehkan 0-9');
document.getElementById('txtBerat').focus();
return false;
}

txt = document.getElementById('txtHP').value;
if(isNaN(parseInt(txt)) || parseInt(txt1)< 0 || parseInt(txt) > 9){
alert('Nilai yang diperbolehkan 0-9');
document.getElementById('txtHP').focus();
return false;
}

}

untuk HTMLnya :


<script type="text/javascript" src="./js/udf-javascript.js"></script>

<form name="bio" id="bio" method="post">
<table cellpadding="0" cellspacing="0" width="100%" height="100%">
	<tr>
    	<td><dd>Nama :<dd></dd>
    </tr>
    <tr>
    	<td><dd><input type="text" name="txtNama" size="50"></dd></td>
    </tr>
	<tr>
    	<td><dd>Alamat :</dd></td>
    </tr>
    <tr>
    	<td><dd><input type="text" name="txtAlamat1" size="50"></dd></td>
    </tr>
	<tr>
    	<td><dd><input type="text" name="txtAlamat2" size="50"></dd></td>
    </tr>
	<tr>
    	<td><dd>Agama :</dd></td>
    </tr>
    <tr>
    	<td><dd><input type="text" name="txtAgama"></dd></td>
    </tr>
    <tr>
    	<td><dd>Pendidikan Terakhir :</dd></td>
    </tr>
    <tr>
    	<td><dd><input type="text" name="txtPendidikan"></dd></td>
    </tr>
    <tr>
    	<td><dd>Nama Bapak :</dd></td>
    </tr>
    <tr>
    	<td><dd><input type="text" name="txtNama2" size="50"></dd></td>
    </tr>
    <tr>
    	<td><dd>Nama Ibu :</dd></td>
    </tr>
    <tr>
    	<td><dd><input type="text" name="txtNama3" size="50"></dd></td>
    </tr>
    <tr>
    	<td><dd>Anak ke :</dd></td>
   </tr>
   <tr>
   	<td><dd> <input type="text" name="txtAnakke" id="txtAnakke" size="5" onkeypress="CheckNum(); return false;"></dd></td>
   </tr>     
   <tr>
   	<td><dd>Dari :</dd></td>
    </tr>
    <tr>
    	<td><dd><input type="text" name="txtDari" id="txtDari" size="5" onkeypress="CheckNum(); return false;"></dd></td>
    </tr>
	<tr>
    	<td><dd>Tinggi :</dd></td>
	</tr>
    <tr>
    	<td><dd><input type="text" name="txtTinggi" id="txtTinggi" size="5" onkeypress="CheckNum(); return false;"> cm</dd></td>
    </tr>
    <tr>
    	<td><dd>Berat  :</dd></td>
    </tr>
    <tr>
    	<td><dd><input type="text" name="txtBerat" id="txtBerat" size="5" onkeypress="CheckNum(); return false;"> kg</dd></td>
    </tr>
    <tr>
    	<td><dd>No Hp :</dd></td>
    </tr>
    <tr>
    	<td><dd><input type="text" name="txtHP" id="txtHP" size="20" onkeypress="CheckNum(); return false;"></dd></td>
    </tr>
    <tr>
    	<td><dd>E-mail :</dd></td>
    </tr>
    <tr>
    	<td><dd><input type="text" name="txtEmail" id="txtEmail" size="35"></dd></td>
    </tr>
    <tr>
    	<td><dd><input type="submit" name="btn_save" value="Simpan" onclick="return confirm('Yakin data disimpan ?');"> |
        		<input type="reset" name="reset" value="Batal"></dd></td>
    </tr>
</table>
</form>

Answer 3

3

Ressa Cahyani · Jul 30, 2011 · 3 Suka · 0 Tidak Suka

begini saja.
untuk mevalidasi angka yang lebih dari pada satu pada text box, tambahkan size=1 maxlength=1 pada setiap input, misal
<input type="text" name="txtNil_4" maxlength=1> dan seterusnya..

kalau untuk validasi jika diinputkan selain angka cb gunakan ini

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function validate(){
var valid = true;
$('input[type="text"]').each(function(){
var vl = $(this).val();
if(isNaN(vl) || vl > 9 || vl < 0){
$(this).parent().append('<span style="color:red"> Inputan Salah</span>');
valid = false;
}
});
if(!valid){
alert('Periksa kembali Inputan Anda. Pastikan inputan 0 sampai 9.');
return false;
}
return true;
}
</script>

dan jangan lupa menambahkan onsubmit="return validate();" pada form yang digunakan

Answer 4

0

Bella · Jul 30, 2011 · 0 Suka · 0 Tidak Suka

Mbak Ressa, terima kasih ya atas petunjuknya, akan tetapi semua saran yang Mbak Ressa berikan udah saya lakuin, namun tetep aja nggak ada ngaruhnya Mbak ...

Aduuh ...!!, bener-bener punyeng aku dibuatnya ....
mohon bantuannya dong, dari master-master semua
please ....

Answer 5

1

Ellyx Christian · Jul 30, 2011 · 1 Suka · 0 Tidak Suka

Setelah saya lihat form yang kamu buat, saya rasa pertanyaan kamu itu ambigu. Ada beberapa kesalahan pada form yang kamu buat, pertama tag <dd/> tidak boleh berada didalam tag <td/>. Kedua konfirmasi (onclick="return confirm('balah blah')") saat melakukan penyimpanan membuat proses validasi gagal, sebenarnya itu tidak diperlukan, itu tidak diperlukan, hanya membuat pengguna kesal (kecuali data yang sangat sangat dan sangat sensitif), Di bawah saya rasa kode yang benar:

<form name="bio" id="bio" method="post" onsubmit="return CheckNum();">
<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td>Nama :</td>
</tr>
<tr>
<td><input type="text" name="txtNama" size="50"></td>
</tr>
<tr>
<td>Alamat :</td>
</tr>
<tr>
<td><input type="text" name="txtAlamat1" size="50"></td>
</tr>
<tr>
<td><input type="text" name="txtAlamat2" size="50"></td>
</tr>
<tr>
<td>Agama :</td>
</tr>
<tr>
<td><input type="text" name="txtAgama"></td>
</tr>
<tr>
<td>Pendidikan Terakhir :</td>
</tr>
<tr>
<td><input type="text" name="txtPendidikan"></td>
</tr>
<tr>
<td>Nama Bapak :</td>
</tr>
<tr>
<td><input type="text" name="txtNama2" size="50"></td>
</tr>
<tr>
<td>Nama Ibu :</td>
</tr>
<tr>
<td><input type="text" name="txtNama3" size="50"></td>
</tr>
<tr>
<td>Anak ke :</td>
</tr>
<tr>
<td> <input type="text" name="txtAnakke" id="txtAnakke" size="5"></td>
</tr> 
<tr>
<td>Dari :</td>
</tr>
<tr>
<td><input type="text" name="txtDari" id="txtDari" size="5"></td>
</tr>
<tr>
<td>Tinggi :</td>
</tr>
<tr>
<td><input type="text" name="txtTinggi" id="txtTinggi" size="5"> cm</td>
</tr>
<tr>
<td>Berat :</td>
</tr>
<tr>
<td><input type="text" name="txtBerat" id="txtBerat" size="5"> kg</td>
</tr>
<tr>
<td>No Hp :</td>
</tr>
<tr>
<td><input type="text" name="txtHP" id="txtHP" size="20"></td>
</tr>
<tr>
<td>E-mail :</td>
</tr>
<tr>
<td><input type="text" name="txtEmail" id="txtEmail" size="35"></td>
</tr>
<tr>
<td><input type="submit" name="btn_save" value="Simpan"> |
<input type="reset" name="reset" value="Batal"></td>
</tr>
</table>
</form>
<script type="text/javascript">
function CheckNum() {
	var regex = /\D/;
    var txt = document.getElementById('txtAnakke').value;
    if(regex.test(txt)){
        alert('Input harus angka!');
        document.getElementById('txtAnakke').focus();
        return false;
    }
    
    txt = document.getElementById('txtDari').value;
    if(regex.test(txt)){
        alert('Input harus angka!');
        document.getElementById('txtDari').focus();
        return false;
    }
    
    txt = document.getElementById('txtTinggi').value;
    if(regex.test(txt)){
        alert('Input harus angka!');
        document.getElementById('txtTinggi').focus();
        return false;
    }
    
    txt = document.getElementById('txtBerat').value;
    if(regex.test(txt)){
        alert('Input harus angka!');
        document.getElementById('txtBerat').focus();
        return false;
    }
    
    txt = document.getElementById('txtHP').value;
    if(regex.test(txt)){
        alert('Input harus angka!');
        document.getElementById('txtHP').focus();
        return false;
    }
    return true;
    
}
</script>

Answer 6

0

Bella · Jul 30, 2011 · 0 Suka · 0 Tidak Suka

Terima kasih ya Mas Ellyx, atas penjelasan dan bantuannya.
by the way, any way and bus way "Ambigu" maksudnya paan seh Mas ?

maklum saya kan masih dibawah 18th

jadi nggak ngerti maksudnya ...

sekali lagi terima kasih atas penjelasan dan bantuannya Mas ...

Answer 7

0

Ellyx Christian · Jul 31, 2011 · 0 Suka · 0 Tidak Suka

ambigu itu artinya memiliki dua arti