Baca Juga :  Selector ID CSS

Membuat Validasi Form jQuery dengan Tooltip

0 351

Dalam tutorial ini, kita memvalidasi formulir kontak dan menampilkan pesan kesalahan dengan menggunakan tooltip jQuery. Dalam contoh tooltip jQuery ini, kami menyorot kolom formulir untuk menampilkan hasil validasi. Dan kemudian kami memanggil fungsi tooltip untuk menampilkan pesan validasi.

Formulir Kontak HTML

Kode ini termasuk bidang formulir kontak yang diperlukan untuk divalidasi menggunakan jQuery. Setelah validasi, bidang ini disorot untuk menampilkan tooltip validasi pada gerakan mouse.

<div id="frmContact">
	<div id="mail-status"></div>
	<label style="padding-top:20px;">Name</label>
	<div>
	<input type="text" name="userName" id="userName" class="demoInputBox" required="true">
	</div>
	<label>Email</label>
	<div>
	<input type="email" name="userEmail" id="userEmail" class="demoInputBox" required="true">
	</div>
	<label>Subject</label> 
	<div>
	<input type="text" name="subject" id="subject" class="demoInputBox" required="true">
	</div>
	<label>Content</label> 
	<div>
	<textarea name="content" id="content" class="demoInputBox" cols="60" rows="6" required="true"></textarea>
	</div>
	<div>
	<button name="submit" class="btnAction" onClick="sendContact();">Send</button>
	</div>
</div>

Validasi Formulir jQuery

Skrip berikut digunakan untuk memvalidasi kolom dan email yang diperlukan. Untuk menampilkan hasil validasi kami menerapkan gaya dan menambahkan pesan teks tip alat melalui jQuery.

Baca Juga :  Membuat Filter Price PHP Menggunakan jQuery Slider
function validateContact() {
	var valid = true;
	$("#frmContact input[required=true], #frmContact textarea[required=true]").each(function(){
		$(this).removeClass('invalid');
		$(this).attr('title','');
		if(!$(this).val()){ 
			$(this).addClass('invalid');
			$(this).attr('title','This field is required');
			valid = false;
		}
		if($(this).attr("type")=="email" && !$(this).val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)){
			$(this).addClass('invalid');
			$(this).attr('title','Enter valid email');
			valid = false;
		}  
	}); 
	return valid;
}

jQuery Tooltip di Form

Panggilan jQuery ini menunjukkan pesan tooltip pada acara gerakan mouse dari bidang formulir yang disorot.

$(function() {
	$( document ).tooltip({
		position: {my: "left top", at: "right top"},
	  items: "input[required=true], textarea[required=true]",
	  content: function() { return $(this).attr( "title" ); }
	});
});

Demo

Get real time updates directly on you device, subscribe now.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.