sample.php
Language
PHP
Compiler
php 8.2.1
Options
sample.php
$ php prog.php <html>
<head>
<script>
function validation_submit(f) {
const submit = document.getElementById("uso_submit");
/* 判定は逆なので、逆に渡す */
submit.disabled = f?false:true;
};
function validation_text(parts) {
/* このpartsグループの、input=textを抽出 */
let text=parts.getElementsByClassName('uso_input')[0];
/* バリデーション警告パーツを抽出 */
let v1=parts.getElementsByClassName('uso_input_validation1')[0];
let v2=parts.getElementsByClassName('uso_input_validation2')[0];
let v3=parts.getElementsByClassName('uso_input_validation3')[0];
v1.style.display =
v2.style.display =
v3.style.display = 'none';
/* 例えばのチェック */
/* 最小チェック */
if (text.value.length==0) {
v1.style.display = 'block';
return false;
}
/* 最大チェック */
if (text.value.length>=text.dataset.length) {
v3.style.display = 'block';
return false;
}
/* それ以外 */
v2.getElementsByTagName('span')[0].innerText=text.dataset.length-text.value.length;
v2.style.display = 'block';
return true;
};
/* バリデーション条件判断部分 */
function validation() {
let parts = document.getElementsByClassName('parts');
let submit=true;
for (let i=0;i<parts.length;i++) {
if (validation_text(parts[i])!=true) {
submit=false;
}
}
validation_submit(submit);
};
/* DOM構築が終わってから呼び出される初期化関数 */
function init() {
// let text = document.getElementById('uso_input');
// text.oninput = e_text;
/* ↑これを、idじゃなくてclass対応に変更↓ */
/* class=parts内の class=uso_inputに対して設定 */
let parts = document.getElementsByClassName('parts');
for (let i=0;i<parts.length;i++) {
parts[i].getElementsByClassName('uso_input')[0].oninput = validation;
}
validation();
};
window.onload = init;
<script>
<style>
/* バリデーション警告文章は「赤」に設定 */
.uso_input_validation {
display:none;
color:red;
}
/* これで、.uso_input_validation内で使ったspanタグの中は常に「青」になる */
.uso_input_validation span {
color:blue;
}
</style>
</head>
<body>
<div>嘘フォーム</div>
<!-- parts 何個でも対応にしといたよ～ -->
<div class=parts>
<input class=uso_input type="text" name="name1" data-length=32>/32文字まで<br>
<div class="uso_input_validation uso_input_validation1">タイトルを入力してください。</div>
<div class="uso_input_validation uso_input_validation2">あと<span></span>文字入力できます。</div>
<div class="uso_input_validation uso_input_validation3">長すぎます。</div>
</div>
<div class=parts>
<input class=uso_input type="text" name="name2" data-length=40>/40文字まで<br>
<div class="uso_input_validation uso_input_validation1">本文を入力してください。</div>
<div class="uso_input_validation uso_input_validation2">あと<span></span>文字入力できます。</div>
<div class="uso_input_validation uso_input_validation3">長すぎます。</div>
</div>
<input id=uso_submit type="submit"><br>
条件にあわせてSubmitの使用権限を操作してます。
</body>
</html>Exit Code:
0