UpilBebek/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Log In</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <form id="form" method="post">
            <label>Name</label>
            <input type="text" id="name" name="name">
            <br>
            <button type="submit">Simpan</button>
        </form>

        <script src="./js/myapp.js"></script>
    </body>
</html>

## myapp.js
/*
 * Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
 * Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/JavaScript.js to edit this template
 */

/**
 *
 * @param {type} e
 * @returns {undefined}
 * Hindari innerHMTL, solusinya kita bisa pakai
 * document.createElement()
 */

function main(e) {
    let components = {
        form: document.querySelector("#form"),
        name: document.querySelector("#name"),
        button: document.querySelector("button[type='submit']")
    };

    form.addEventListener("submit", (e) => {
        e.preventDefault();
        addValidator(components);
        let {isValidAll, validationMessage} = validate(components);

        if (isValidAll) {
            // send
            sendData();
        } else {
            let div = document.createElement("div");
            div.style.paddingLeft = "10px";
            div.style.paddingRight = "10px";
            div.style.background = "red";
            div.style.color = "white";
            div.textContent = "ups error";
            components.form.appendChild(div);
            // sebelum kirim data, pastikan data yang mengandung
            // script/tag dihapus
            // input.replace(/</g, "&lt;").replace(/>/g, "&gt;");
            // arahan kirim data gunakan fecth
            // pencegahan weak password
            // "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@.#$!%*?&])[A-Za-z\d@.#$!%*?&]{8,15}$"

            console.log(validationMessage);
        }

    });
}

function addValidator(components) {
    let validators = {
        name: [
            ['maxlength', 40],
            ['minlength', 10],
            ['required', true]
        ]
    };

    // ES6 method array map
    validators.name.map((attrs) => components.name.setAttribute(attrs[0], attrs[1]));
}

function sendData(components) {
    // arahan send data, tolong digunakan fetch
    // bisa menggunakan FormData
}

function validate(components) {
    let isValidAll = true;
    let validationMessage = {
        name: {
            isValid: true,
            message: ""
        }
    };

    if (!components.name.checkValidity()) {
        components.name.style.background = 'red';
        isValidAll = false;
        validationMessage.name.isValid = false;
        validationMessage.name.message = components.name.validationMessage;
    }

    return {validationMessage, isValidAll};
}

document.addEventListener("DOMContentLoaded", main);
	<!DOCTYPE html>
	<html>
	<head>
	<title>Log In</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
	<form id="form" method="post">
	<label>Name</label>
	<input type="text" id="name" name="name">
	<br>
	<button type="submit">Simpan</button>
	</form>

	<script src="./js/myapp.js"></script>
	</body>
	</html>
	/*
	* Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
	* Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/JavaScript.js to edit this template
	*/

	/**
	*
	* @param {type} e
	* @returns {undefined}
	* Hindari innerHMTL, solusinya kita bisa pakai
	* document.createElement()
	*/

	function main(e) {
	let components = {
	form: document.querySelector("#form"),
	name: document.querySelector("#name"),
	button: document.querySelector("button[type='submit']")
	};

	form.addEventListener("submit", (e) => {
	e.preventDefault();
	addValidator(components);
	let {isValidAll, validationMessage} = validate(components);

	if (isValidAll) {
	// send
	sendData();
	} else {
	let div = document.createElement("div");
	div.style.paddingLeft = "10px";
	div.style.paddingRight = "10px";
	div.style.background = "red";
	div.style.color = "white";
	div.textContent = "ups error";
	components.form.appendChild(div);
	// sebelum kirim data, pastikan data yang mengandung
	// script/tag dihapus
	// input.replace(/</g, "<").replace(/>/g, ">");
	// arahan kirim data gunakan fecth
	// pencegahan weak password
	// "^(?=.[a-z])(?=.[A-Z])(?=.\d)(?=.[@.#$!%?&])[A-Za-z\d@.#$!%?&]{8,15}$"

	console.log(validationMessage);
	}

	});
	}

	function addValidator(components) {
	let validators = {
	name: [
	['maxlength', 40],
	['minlength', 10],
	['required', true]
	]
	};

	// ES6 method array map
	validators.name.map((attrs) => components.name.setAttribute(attrs[0], attrs[1]));
	}

	function sendData(components) {
	// arahan send data, tolong digunakan fetch
	// bisa menggunakan FormData
	}

	function validate(components) {
	let isValidAll = true;
	let validationMessage = {
	name: {
	isValid: true,
	message: ""
	}
	};

	if (!components.name.checkValidity()) {
	components.name.style.background = 'red';
	isValidAll = false;
	validationMessage.name.isValid = false;
	validationMessage.name.message = components.name.validationMessage;
	}

	return {validationMessage, isValidAll};
	}

	document.addEventListener("DOMContentLoaded", main);