Home / Unlabelled / BBL Validation

BBL Validation

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="initial-scale=1.0 , minimum-scale=1.0 , maximum-scale=1.0" />
<title>BIBALALA</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link href="css/grid.css" rel="stylesheet" />
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" /> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<link href="css/fullpage.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script src="js/fullpage.js" type="text/javascript"></script>
</head>
<body>
<!-- Part Now -->
<div id="errorModal" class="modal">
<div style="text-align: center; margin-bottom: 10px;" id="errorModalTitle"></div>
<div id="errorModalTxt"></div>
</div>
<!-- End Part Now -->
<h1>Pembelajaran bahasa inggris</h1>
<header>
<div class="container flex">
<div class="hamburgerBar mobile">
<span></span>
</div>
<div class="brand">
<a href=""><img src="img/logo-bibalala.png" alt="logo"></a>
</div>
<div class="nav-wrap">
<img src="img/icon-closeNav.jpg" class="mobile closeNav" alt="" />
<img src="img/logo-mobile.jpg" class="mobile logo-mobile" alt="" />
<ul class="navigation">
<li><a href="#Beranda" data-menuanchor="Beranda">Beranda</a></li>
<li><a href="#Konten-Pelajaran" data-menuanchor="Konten-Pelajaran">Konten Pelajaran</a></li>
<li><a href="#Hubungi-Kami" data-menuanchor="Hubungi-Kami">Hubungi Kami</a></li>
<li><a href="#Fitur" data-menuanchor="Fitur">Fitur</a></li>
<li><a href="#Kontak" data-menuanchor="Kontak">Komunitas</a></li>
</ul>
<div class="sosmed-wrap">
<a href="https://www.facebook.com/bibalala.english" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="https://www.instagram.com/bibalala.english/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
<a href="https://www.youtube.com/channel/UC_1K5I7qyxazdrmyEwd6WNw" target="_blank"><i class="fa-brands fa-youtube"></i></a>
<a href="https://www.tiktok.com/@bibalala.english" target="_blank"><i class="fa-brands fa-tiktok"></i></a>
</div>
</div>
<div class="overlay"></div>
</div>
</header>
<div id="fullpage">
<section id="mainBanner" class="section">
<img src="img/main-banner.jpg" class="img-responsive desktop" alt="Main Banner" />
<img src="img/main-banner_mobile.jpg" class="img-responsive mobile" alt="Main Banner" />
<div class="container" style="position: relative;">
<a href="javascript:void(0)" id="playVideo"></a>
</div>
<div class="container">
<div class="col-xs-12 col-sm-9 wrapper no-pad">
<h3>
<strong>BIBALALA</strong> adalah <strong> pembelajaran bahasa Inggris</strong> yang ditujukan bagi anak usia antara 3-11 tahun,
menggunakan basis kurikulum internasional Cambridge <strong>(CEFR)</strong>, dengan metode efektif sekaligus menyenangkan.
</h3>
</div>
</div>
</section>
<section id="content-study" class="section">
<div class="content-pel_">
<div class="container">
<div class="col-xs-12 col-sm-11 col-md-9 wrapper no-pad">
<div class="content-pel_top">
<div class="col-xs-12 col-sm-3 pic-act">
<img src="img/content-study-actor.png" alt="">
</div>
<div class="col-xs-12 col-sm-9">
<h2>Konten Pelajaran</h2>
<div class="value-content">
<div class="col-xs-4 no-pad val-card card-lesson">
<strong>360+</strong>
<p>Video Interaktif</p>
</div>
<div class="col-xs-4 no-pad val-card card-theme">
<strong>75</strong>
<p>Topik Pelajaran</p>
</div>
<div class="col-xs-4 no-pad val-card card-vocabulary">
<strong>3000</strong>
<p>Kosa Kata</p>
</div>
<div class="col-xs-4 no-pad val-card card-sample">
<strong>200</strong>
<p>Contoh Kalimat</p>
</div>
<div class="col-xs-4 no-pad val-card card-songs">
<strong>100</strong>
<p>Lagu</p>
</div>
<div class="col-xs-4 no-pad val-card card-games">
<strong>5000</strong>
<p>Permainan</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-pel_bottom">
<div class="container">
<div class="col-xs-12 col-sm-11 col-md-9 wrapper">
<div class="col-img_wrap">
<div class="col-img">
<img src="img/img-membaca.jpg" />
<h4>Membaca</h4>
</div>
<div class="col-img">
<img src="img/img-mendengar.jpg" />
<h4>Mendengar</h4>
</div>
<div class="col-img">
<img src="img/img-berbicara.jpg" />
<h4>Berbicara</h4>
</div>
<div class="col-img">
<img src="img/img-penilaian.jpg" />
<h4>Penilaian</h4>
</div>
</div>
<p>
Hanya butuh waktu <strong>15-20 menit</strong> / sesi setiap harinya. Siswa akan diajak berperan aktif dalam permainan berganti peran
dan situasi belajar agar membangun minat serta meningkatkan kemauan anak untuk belajar bahasa Inggris.
</p>
</div>
</div>
</div>
</section>
<section id="callWe" class="section">
<div class="callWe-wrap">
<div class="img-left">
<img src="img/call-img_left.png" />
</div>
<div class="formInfo">
<div class="formInfo_card">
<h2>HUBUNGI KAMI</h2>
<p>
Dapatkan informasi terbaru dan promo menarik<br />
untuk layanan kami! <strong> HOTLINE: 0858-1701-1850</strong>
</p>
<h3>MASUKKAN PESAN</h3>
<div class="formcard_wrap">
<p>
<input id="name" type="text" class="ipt_form" placeholder="Nama Anda" min="6" maxlength="25" onblur="onBlurName()" onfocus="onFocusName()" autocomplete="off" required />
<span id="notifName"></span>
</p>
<p>
<input id="email" type="email" class="ipt_form" placeholder="E-mail Anda" onblur="onBlurEmail()" onfocus="onFocusEmail()" autocomplete="off" />
<!-- <input id="email" type="email" class="ipt_form" placeholder="E-mail Anda" /> -->
<span id="notifEmail"></span>
</p>
<p>
<span class="codeArea">
+<input type="number" id="codePhoneChange" value="" onKeyPress="if(this.value.length==3) return false;" style="width:30px;border:none;">
<select id="codePhone" onchange="changePhoneInOption(this.value)" style="width:20px"></select>
</span>
<input id="telp" type="number" class="ipt_form" placeholder="Nomor Telepon Anda" onblur="onBlurPhone()" onfocus="onFocusPhone()" autocomplete="off" />
<span id="notifPhone"></span>
<!-- End Part Now -->
</p>
<p>
<textarea id="message" placeholder="Pesan Anda" maxlength="255" autocomplete="off"></textarea>
</p>
<p>
<button type="button" onclick="ValidasiAddData()">KIRIM PESAN</button>
</p>
</div>
</div>
</div>
<div class="img-right">
<img src="img/call-img_right.png" />
</div>
</div>
</section>
<section id="feature" class="section">
<div class="container">
<div class="col-xs-12 col-sm-11 wrapper">
<h2>Fitur Bibalala</h2>
<div class="feature_wrap">
<div class="col-xs-10 col-sm-9 col-md-4">
<div class="feature-card">
<img src="img/fitur-ispeak.png" />
<p><span>Belajar berkomunikasi sejak dini</span> lewat <br /><strong> i-Speak Technology</strong></p>
</div>
</div>
<div class="col-xs-10 col-sm-9 col-md-4">
<div class="feature-card">
<img src="img/fitur-interactive.png" />
<p><span>Membantu anak berinteraksi dengan</span> <br /><strong>Live Interactive</strong> technology</p>
</div>
</div>
<div class="col-xs-10 col-sm-9 col-md-4">
<div class="feature-card">
<img src="img/fitur-fes.png" />
<p><span>Pembelajaran lewat metode <strong>FES</strong></span><br /> <i>(Feelings - Encourage - Sharing)</i></p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="section">
<div class="container">
<div class="col-xs-12 col-sm-10 wrapper">
<h2><span>Komunitas</span></h2>
<div class="contact-wrap">
<div class="sosmed-bottom">
<div class="sosmed-list">
<h4>Yuk bergabung di Komunitas Bibalala</h4>
<a href="https://www.facebook.com/bibalala.english" target="_blank">
<div class="sosmed">
<i class="fa-brands fa-facebook-f"></i>
</div>
<!-- <span>Bibalala.english</span> -->
</a>
<a href="https://www.instagram.com/bibalala.english" target="_blank">
<div class="sosmed">
<i class="fa-brands fa-instagram"></i>
</div>
<!-- <span>Bibalala.english</span> -->
</a>
<a href="https://www.youtube.com/channel/UC_1K5I7qyxazdrmyEwd6WNw" target="_blank">
<div class="sosmed">
<i class="fa-brands fa-youtube"></i>
</div>
<!-- <span>Bibalala.english</span> -->
</a>
<a href="https://www.tiktok.com/@bibalala.english" target="_blank">
<div class="sosmed">
<i class="fa-brands fa-tiktok"></i>
</div>
<!-- <span>Bibalala.english</span> -->
</a>
</div>
<div class="call-us">
Bibalala English mempersiapkan<br />
masa depan anak anda
</div>
</div>
<div class="img-bottom">
<img src="img/rabbit.png" />
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container">
<div class="col-xs-12 col-sm-10 wrapper">
<div class="years-wrap">
<img src="img/logo-8e.png" class="logo8e" /> 8ELEMENTS <span class="years"></span>
</div>
<div class="copyright">
© By Educa Corporation.
</div>
</div>
</div>
</footer>
</section>
</div>
<div id="vidBox">
<div id="videCont">
<video autoplay id="videoLearning" loop controls>
<source src="img/Babilala_ English for Kids_2.mp4" type="video/mp4">
<source src="img/Babilala_ English for Kids_1.ogg" type="video/ogg">
</video>
</div>
</div>
<script type="text/javascript">
var myFullpage = new fullpage('#fullpage', {
verticalCentered: false,
anchors: ['Beranda', 'Konten-Pelajaran', 'Hubungi-Kami', 'Fitur', 'Kontak'],
menu: '.navigation'
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
$('.years').html(new Date().getFullYear());
$(".hamburgerBar").click(function () {
$("header").toggleClass("openNav");
});
$(".overlay, .nav-wrap").click(function(){
$("header").removeClass("openNav");
})
$.fn.VideoPopUp = function (options) {
var defaults = {
backgroundColor: "#17212a",
opener: "playVideo",
maxweight: "340",
pausevideo: true,
idvideo: "videoLearning"
};
var patter = this.attr('id');
var settings = $.extend({}, defaults, options);
var video = document.getElementById(settings.idvideo);
function stopVideo() {
var tag = $('#' + patter + '').get(0).tagName;
if (tag == 'video') {
video.pause();
video.currentTime = 0;
}
}
$('#' + patter + '').css("display", "none");
$('#' + patter + '').append('<div id="opct"></div>');
$('#opct').css("background", settings.backgroundColor);
$('#' + patter + '').css("z-index", "100001");
$('#' + patter + '').css("position", "fixed")
$('#' + patter + '').css("top", "0");
$('#' + patter + '').css("bottom", "0");
$('#' + patter + '').css("right", "0");
$('#' + patter + '').css("left", "0");
$('#' + patter + '').css("padding", "auto");
$('#' + patter + '').css("text-align", "center");
$('#' + patter + '').css("background", "none");
$('#' + patter + '').css("vertical-align", "vertical-align");
$("#videCont").css("z-index", "100002");
$('#' + patter + '').append('<div id="closer_videopopup">&otimes;</div>');
$("#" + settings.opener + "").on('click', function () {
$('#' + patter + "").show();
$('#'+settings.idvideo+'').trigger('play');
});
$("#closer_videopopup, #opct").on('click', function () {
if(settings.pausevideo==true){
$('#'+settings.idvideo+'').trigger('pause');
}else{
stopVideo();
}
$('#' + patter + "").hide();
});
return this.css({});
};
$('#vidBox').VideoPopUp();
var errorModalTitle = "";
var message = "";
var input = jQuery("#name");
input.on('keyup keydown copy' , function(){
$("#name").keypress("input", function (e) {
var k = e.keyCode,
$notAllowSymbol = ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
if (!$notAllowSymbol) {
$('#notifName').remove();
return false;
}
})
$('#notifName').remove();
cekEmptySpanName();
message = "";
cekName();
$("#notifName").html(message);
})
$("#email").on("input", function () {
$('#notifEmail').remove();
cekEmptySpanEmail();
message = "";
cekEmail();
$("#notifEmail").html(message);
})
$(document).ready(function () {
//GetGeoLocation();
cekEmptySpanName();
cekEmptySpanEmail();
cekEmptySpanPhone();
getCountryOption()
});
function onBlurName(){
$("#notifName").remove();
}
function onFocusName(){
var getNameArr = $(".formcard_wrap").find("p");
$(getNameArr[0]).append("<span class='notify' id='notifName'></span>");
message = "";
cekName();
$("#notifName").html(message);
}
function onBlurEmail(){
$("#notifEmail").remove();
}
function onFocusEmail(){
var getEmailArr = $(".formcard_wrap").find("p");
$(getEmailArr[1]).append("<span class='notify' id='notifEmail'></span>");
message = "";
cekEmail();
$("#notifEmail").html(message);
}
function cekEmptySpanName(){
var name = $("#name").val();
if(name == ''){
$('#notifName').remove();
}else{
var getNameArr = $(".formcard_wrap").find("p");
$(getNameArr[0]).append("<span class='notify' id='notifName'></span>");
}
}
function cekEmptySpanEmail(){
var email = $("#email").val();
if(email == ''){
$('#notifEmail').remove();
}else{
var getEmailArr = $(".formcard_wrap").find("p");
$(getEmailArr[1]).append("<span class='notify' id='notifEmail'></span>");
}
}
function GetGeoLocation(){
var url = '/ContactUs/GetLocation';
$.ajax({
url: url,
success: function (respon) {
var html = "";
console.log(respon.countryCode);
var getCountryCode = CountryCode(respon.countryCode);
$("#codePhoneChange").val(getCountryCode.CountryCode);
html += `<option></option>`;
for (var a = 0; a < dataCountry.length; a++) {
var getDataCountry = dataCountry[a];
html += `<option value="${getDataCountry.PhoneCode}">${getDataCountry.PhoneCode} ${getDataCountry.Name}</option>`;
}
$("#codePhone").html(html);
},
error: function () {
alert("Error");
}
});
}
function cekName() {
var allMessageEnglish = '<ul> <li>At least 6 characters length and maximum of 25 characters </li> <li>Only contain letters and numbers (a-z and 0-9) </li><li>Username must be unique for each user</li></ul>';
var AllMessageIndo = '<ul> <li>Berjumlah antara 6 sampai 25 karakter </li> <li> Hanya memuat Huruf dan Angka (a-z dan 0-9), atau kombinasi keduanya </li></ul>';
var defaultErrorName = 'Error Form Name';
var pass1 = document.getElementById('name');
if (pass1.value.length < 6) {
message = 'At least 6 characters length';
message = AllMessageIndo;
errorModalTitle = defaultErrorName;
}
if (pass1.value.length >= 6) {
$('#notifName').remove();
}
if (pass1.value.length > 24) {
cekEmptySpanName();
message = 'maximum of 25 characters';
errorModalTitle = defaultErrorName;
}
if (pass1.value.length == 25) {
$('#notifName').remove();
}
}
function cekATSymbolInEmail(s) {
var rgx = /[@]/;
return s.match(rgx);
}
function getCekDotEmail(s) {
var rgx = /[.]/;
return s.match(rgx);
}
function dotJustAllowInTheMiddle(s) {
var rgx = /^[^.]+\..*[^-_.]$/;
return s.match(rgx);
}
function cekEmail() {
var defaultErrorEmail = "Error Form Email";
var allMessageEnglish = '<ul><li>Email address must not be empty</li> <li>Email address should contain the @ symbol between the local part and the domain part </li> <li>The maximum length of the local part is 64 characters and the maximum length of the domain part is 255 characters </li><li> The domain part should contain at least one dot (.) character </li> <li>Email address must be unique for each user </li></ul>';
var allMessageIndo = '<ul> <li>Kolom harus diisi</li><li>Taruh simbol @ antara nama email dan domainnya</li> <li>Panjang maksimum nama email adalah 64 karakter dan nama domain tidak boleh lebih dari karakter</li> <li>Nama domain juga harus memuat karakter titik (.)</li> <li>Nama email antara pengguna tidak boleh sama </li></ul>';
var email = $("#email").val();
var formatEmail = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var nilai = $("#email").val();
var cekDotEmail = getCekDotEmail(nilai);
var cekDotOnlyInTheMiddle = dotJustAllowInTheMiddle(nilai);
if (cekDotOnlyInTheMiddle == null) {
message = 'The dot (.) can only be placed in the middle of the text';
errorModalTitle = defaultErrorEmail;
}
if (cekDotEmail == null) {
message = 'The domain part should contain at least one dot (.) character';
errorModalTitle = defaultErrorEmail;
}
if (email == '') {
message = 'Email address must not be empty';
errorModalTitle = defaultErrorEmail;
}
if(message == ''){
$('#notifEmail').remove();
}
if (nilai.match(formatEmail)) {
$('#notifEmail').remove();
return true;
}
else {
// message = 'Format email Vailed';
var cekSymbolForEmail = cekATSymbolInEmail(nilai);
if (cekSymbolForEmail == null) {
message = 'Email address should contain the @ symbol between the local part and the domain part';
errorModalTitle = defaultErrorEmail;
}
message = allMessageIndo;
return false;
}
}
function cekPhone() {
var defaultErrorPhone = "Error Form Telpon";
var txtPhone = $("#telp").val();
var allMessageIndo = '<ul><li>Hanya cantumkan angka</li></ul>'
if (txtPhone == '') {
message = 'Phone Number must not be empty';
message = allMessageIndo;
errorModalTitle = defaultErrorPhone;
}else{
$('#notifPhone').remove();
}
}
function ValidasiAddData() {
message = "";
errorModalTitle = "";
cekName();
cekPhone();
var getEmail = cekEmail();
// if (getEmail == false) message = ' Format Email Failed';
if (message == '') {
AddDataPesan();
}
else {
var htmlModel = "";
var htmlTitle = "";
htmlTitle += errorModalTitle;
htmlModel += message;
$('#errorModalTitle').html(htmlTitle);
$("#errorModalTxt").html(htmlModel);
$('#errorModal').modal('show');
}
}
function AddDataPesan() {
var codePhone = $("#codePhoneChange").val();
var name = $("#name").val();
var email = $("#email").val();
var telp = $("#telp").val();
var message = $("#message").val();
var getMsisdn = codePhone + telp;
var data = {
FullName: name,
Email: email,
MSISDN: getMsisdn,
message: message
}
console.log(data.MSISDN, "=data.MSISDN");
var url = '/ContactUs/SendMessage';
$.ajax({
type: 'POST',
url: url,
data: data,
success: function (respon) {
console.log(respon, "=> respon")
var htmlTitleModel = "";
var htmlModel = "";
htmlTitleModel += respon.messageTitle;
htmlModel += respon.message;
$('#errorModalTitle').html(htmlTitleModel);
$("#errorModalTxt").html(htmlModel);
$('#errorModal').modal('show');
},
error: function () { alert("We will process your data, thank you.") }
});
}
// Country Code And ISOCodes All Coun https://countrycode.org/
function CountryCode(isoCodes) {
var getCountryCode = "";
var country = "";
for (var i = 0; i < dataCountry.length; i++) {
var dtCountry = dataCountry[i];
if (isoCodes == dtCountry.Code) {
country = dtCountry.Name;
getCountryCode = dtCountry.PhoneCode;
}
}
var dataArr = {
CountryCode: getCountryCode,
country:country
};
return dataArr;
}
</script>
<!-- Part Now -->
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<!-- End alert -->
<!-- End Part Now -->
<script>
function onBlurPhone() {
$("#notifPhone").remove();
}
function onFocusPhone() {
var getPhoneArr = $(".formcard_wrap").find("p");
$(getPhoneArr[2]).append("<span class='notify' id='notifPhone'></span>");
message = "";
cekPhone();
$("#notifPhone").html(message);
}
function cekEmptySpanPhone() {
var phone = $("#telp").val();
if (phone == '') {
$('#notifPhone').remove();
} else {
var getPhoneArr = $(".formcard_wrap").find("p");
$(getPhoneArr[2]).append("<span class='notify' id='notifPhone'></span>");
}
}
var inputTelp = jQuery("#telp");
inputTelp.on('keyup keydown copy', function () {
// $("#telp").on("input", function () {
$("#telp").keypress("input", function (e) {
var k = e.keyCode,
$notAllowSymbol = ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
if (!$notAllowSymbol) {
$('#notifPhone').remove();
return false;
}
})
$('#notifPhone').remove();
cekEmptySpanPhone();
message = "";
cekPhone();
$("#notifPhone").html(message);
})
function changePhoneInOption(element) {
document.getElementById("codePhoneChange").value = element;
}
var dataCountry = [];
function getCountryOption() {
var url = '/ContactUs/GetCountryList';
$.ajax({
url: url,
success: function (respon) {
console.log(respon.data[1].Name, "===respon.data[1].Name")
for (var i = 0; i < respon.data.length; i++) {
var getData = respon.data[i];
var objArr = { Name: getData.Name, PhoneCode: getData.PhoneCode,Code: getData.Code };
dataCountry.push(objArr);
}
GetGeoLocation();
},
error: function () {
alert("Error...!!!");
}
});
}
</script>
</body>
</html>
BBL Validation BBL Validation Reviewed by Leo on April 26, 2022 Rating: 5
Tags

Tidak ada komentar

Langganan: Posting Komentar (Atom)

About me

About Me

My name is Joanne Doe, a lifestyle photographer and blogger currently living in Osaka, Japan. I write my thoughts and travel stories inside this blog.