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.

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