jquery form validasi
Pada kesempatan kali ini saya akan membagikan artikel mengenai pembuatan form validasi dan select dengan menggunakan jquey.
Link web : https://ianm27.github.io/book-list/
Link web : https://ianm27.github.io/validatorForm/
Berikut adal kode nya berturut - turut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>jquerysite</title>
<style>
body {
background-color: darkslategrey;
}
</style>
</head>
<body>
<div class="container d-flex justify-content-center">
<div class="w-30 card my-4">
<div class="card-header bg-success"></div>
<div class="card-content px-5 pt-3">
<h2>Add New Book to List!</h2>
<div class="border-top py-4">
<label for="buku" class="form-label">Book title</label>
<input type="text" id="buku" class="form-control" placeholder="Masukkan Judul Buku.." />
<label for="sel1">Book list :</label>
<select class="form-control" id="sel1">
<option>Result</option>
</select>
<button class="btn btn-success my-3" onclick="addBook()">Add new book</button>
</div>
</div>
<div class="card-footer text-center"></div>
</div>
</div>
</body>
<script>
function addBook() {
let buku = document.getElementById("buku").value;
let htmlStr = "<option>Pilih Buku</option>";
htmlStr += "<option>" + buku + "</option>";
$("#sel1").html(htmlStr);
console.log(htmlStr);
}
let errUname = 0;
let errPass = 0;
let errNoHp = 0;
function validateForm() {
if (errUname == 0 && errPass == 0 && errNoHp == 0) return true;
return false;
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>jquerysite</title>
<style>
body {
background-color: darkslategrey;
}
</style>
</head>
<body>
<div class="container d-flex justify-content-center">
<div class="w-30 card my-4">
<div class="card-header bg-success">
</div>
<div class="card-content px-5 pt-3">
<h2>Buat Akun</h2>
<div class="border-top py-4">
<form action="" class="form-group" id="myform" onsubmit="return validateForm()">
<label for="username" class="form-label">Username</label>
<input type="text" id="username" class="form-control"
onkeyup="validateUname($('#username').val())" placeholder="Masukkan username..." required>
<span class="alert text-danger px-0" id="alertUname"></span><br>
<label for="password" class="form-label">Password</label>
<input type="password" id="password" class="form-control"
onkeyup="validatePassword($('#password').val())" placeholder="Masukkan password..."
required>
<span class="alert text-danger px-0" id="alertPass"></span><br>
<label for="email" class="form-label">Email</label>
<input type="email" id="email" class="form-control" placeholder="Masukkan email..." required>
<span class="alert text-danger px-0" id="alertEmail"></span><br>
<label for="hp" class="form-label">Nomor Telepon</label>
<input type="text" id="hp" class="form-control" onkeyup="validateNum($('#hp').val())"
placeholder="Masukkan nomor telepon..." required>
<span class="alert text-danger px-0" id="alertHp"></span><br>
<button type="submit" class="btn btn-success mt-3">Kirim</button>
</form>
</div>
</div>
<div class="card-footer text-center">
</div>
</div>
</body>
<script>
let errUname = 0;
let errPass = 0;
let errNoHp = 0;
function validateForm() {
if (errUname == 0 && errPass == 0 && errNoHp == 0) return true;
return false;
}
function validateUname(uname) {
if (uname.length < 5 || uname.length > 10) {
$('#alertUname').text('Username terdiri dari 5-10 karakter');
errUname = 1;
}
else {
$('#alertUname').text('');
errUname = 0;
}
}
function validatePassword(pass) {
if (pass.length < 8 || pass.length > 16) {
$('#alertPass').text('Password terdiri dari 8-16 Karakter');
errPass = 1;
}
if (pass.length >= 8 && pass.length <= 16) {
$('#alertPass').text('');
errPass = 0;
}
}
function isNumeric(val) {
return /^-?\d+$/.test(val);
}
function validateNum(num) {
if (!isNumeric(num)) {
$('#alertHp').text('Nomor telepon hanya terdiri dari angka');
errNoHp = 1;
}
else if (num.length < 11 || num.length > 13) {
$('#alertHp').text('Nomor telepon terdiri dari 11-13 digit angka');
errNoHp = 1;
}
else {
$('#alertHp').text('');
errNoHp = 0;
}
}
</script>
</html>
Sekian artikel pada kesempatan kali sampai jumpa di artikel selanjutnya, terimakasih.
Komentar
Posting Komentar