joowkim · January 26, 2025 19:37
diff --git a/samplesheet_validation.html b/samplesheet_validation.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample_ID Validation</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .invalid {
            background-color: #ffcccc !important;
        }
        .hidden {
            display: none;
        }
    </style>
 </head>
 <body class="bg-light">
    <div class="container py-5">
        <div class="row mb-3">
            <div class="col-12 d-flex justify-content-start">
                <button class="btn btn-primary" onclick="validateSampleID()">Validate Sample_ID</button>
            </div>
        </div>
        <h2 class="text-center mb-4">Sample_ID Validation</h2>
        <p class="text-center">Paste up to 100 Sample_ID values directly into the table below.</p>
        <div id="warningMessage" class="alert alert-warning" style="display: none;"></div>
        <div class="table-responsive">
            <table id="sampleTable" class="table table-bordered table-striped">
                <thead class="table-dark">
                    <tr>
                        <th>#</th>
                        <th>Sample_ID</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Generate 100 rows dynamically -->
                    <script>
                        for (let i = 1; i <= 100; i++) {
                            document.write(`
                                <tr>
                                    <td>${i}</td>
                                    <td><input type="text" class="form-control" value=""></td>
                                </tr>
                            `);
                        }
                    </script>
                </tbody>
            </table>
        </div>
    </div>

    <script>
        function validateSampleID() {
            const table = document.getElementById("sampleTable");
            const rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
            let invalidCount = 0;
            let invalidEntries = [];

            // Loop through all rows
            for (let row of rows) {
                const input = row.cells[1].getElementsByTagName("input")[0];
                const sampleID = input.value.trim();

                // Check if the Sample_ID is empty and hide the row if it is
                if (sampleID === "") {
                    row.classList.add("hidden");
                    continue; // Skip the rest of the validation for empty cells
                }

                // Validation rule: Must start with a letter, and only contain letters, numbers, and underscores
                if (!/^[A-Za-z][A-Za-z0-9_]*$/.test(sampleID)) {
                    row.classList.add("invalid");
                    invalidCount++;
                    invalidEntries.push(`Row ${row.cells[0].textContent}: ${sampleID}`);
                } else {
                    row.classList.remove("invalid");
                }
            }

            // Show warning if there are invalid entries
            const warningMessage = document.getElementById("warningMessage");
            if (invalidCount > 0) {
                warningMessage.style.display = "block";
                warningMessage.innerHTML = `
                    <strong>${invalidCount} invalid Sample_ID(s) found!</strong><br>
                    Invalid Sample_ID(s):<br>
                    ${invalidEntries.join("<br>")}
                `;
            } else {
                warningMessage.style.display = "none";
            }

            alert("Validation complete! Rows with invalid Sample_ID are highlighted.");
        }

        // Enable pasting multiple values into the table
        document.querySelectorAll("#sampleTable tbody input").forEach(input => {
            input.addEventListener("paste", (event) => {
                event.preventDefault(); // Prevent default paste behavior

                const clipboardData = event.clipboardData.getData("text");
                const rows = clipboardData.split("\n"); // Split by new lines (for multiple rows)
                const inputs = Array.from(document.querySelectorAll("#sampleTable tbody input"));

                for (let i = 0; i < rows.length && i < inputs.length; i++) {
                    inputs[i].value = rows[i].trim();
                }

                // Perform validation immediately after pasting
                validateSampleID();
            });
        });
    </script>

    <!-- Bootstrap JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sample_ID Validation</title>
	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
	<style>
	.invalid {
	background-color: #ffcccc !important;
	}
	.hidden {
	display: none;
	}
	</style>
	</head>
	<body class="bg-light">
	<div class="container py-5">
	<div class="row mb-3">
	<div class="col-12 d-flex justify-content-start">
	<button class="btn btn-primary" onclick="validateSampleID()">Validate Sample_ID</button>
	</div>
	</div>
	<h2 class="text-center mb-4">Sample_ID Validation</h2>
	<p class="text-center">Paste up to 100 Sample_ID values directly into the table below.</p>
	<div id="warningMessage" class="alert alert-warning" style="display: none;"></div>
	<div class="table-responsive">
	<table id="sampleTable" class="table table-bordered table-striped">
	<thead class="table-dark">
	<tr>
	<th>#</th>
	<th>Sample_ID</th>
	</tr>
	</thead>
	<tbody>
	<!-- Generate 100 rows dynamically -->
	<script>
	for (let i = 1; i <= 100; i++) {
	document.write(`
	<tr>
	<td>${i}</td>
	<td><input type="text" class="form-control" value=""></td>
	</tr>
	`);
	}
	</script>
	</tbody>
	</table>
	</div>
	</div>

	<script>
	function validateSampleID() {
	const table = document.getElementById("sampleTable");
	const rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
	let invalidCount = 0;
	let invalidEntries = [];

	// Loop through all rows
	for (let row of rows) {
	const input = row.cells[1].getElementsByTagName("input")[0];
	const sampleID = input.value.trim();

	// Check if the Sample_ID is empty and hide the row if it is
	if (sampleID === "") {
	row.classList.add("hidden");
	continue; // Skip the rest of the validation for empty cells
	}

	// Validation rule: Must start with a letter, and only contain letters, numbers, and underscores
	if (!/^[A-Za-z][A-Za-z0-9_]*$/.test(sampleID)) {
	row.classList.add("invalid");
	invalidCount++;
	invalidEntries.push(`Row ${row.cells[0].textContent}: ${sampleID}`);
	} else {
	row.classList.remove("invalid");
	}
	}

	// Show warning if there are invalid entries
	const warningMessage = document.getElementById("warningMessage");
	if (invalidCount > 0) {
	warningMessage.style.display = "block";
	warningMessage.innerHTML = `
	<strong>${invalidCount} invalid Sample_ID(s) found!</strong><br>
	Invalid Sample_ID(s):<br>
	${invalidEntries.join("<br>")}
	`;
	} else {
	warningMessage.style.display = "none";
	}

	alert("Validation complete! Rows with invalid Sample_ID are highlighted.");
	}

	// Enable pasting multiple values into the table
	document.querySelectorAll("#sampleTable tbody input").forEach(input => {
	input.addEventListener("paste", (event) => {
	event.preventDefault(); // Prevent default paste behavior

	const clipboardData = event.clipboardData.getData("text");
	const rows = clipboardData.split("\n"); // Split by new lines (for multiple rows)
	const inputs = Array.from(document.querySelectorAll("#sampleTable tbody input"));

	for (let i = 0; i < rows.length && i < inputs.length; i++) {
	inputs[i].value = rows[i].trim();
	}

	// Perform validation immediately after pasting
	validateSampleID();
	});
	});
	</script>

	<!-- Bootstrap JS Bundle -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
	</body>
	</html>