表单数字输入验证优化：仅在输入逗号时显示错误提示

• 需求：表单要求数字使用**点（.）**作为小数点分隔符，禁止使用逗号（,）
• 当前问题：输入带点的小数时错误触发错误提示，需调整逻辑，仅在用户输入逗号时显示提示

if (in_array($_SESSION['profil'], ['Consultation - Lecture seule', 'Consultation nationale', 'Pilote Investissement M2IO']) || ($_SESSION['profil'] == "Administrateur" && $_SESSION['code_etablissement'] == '02000')) {
    if (isset($rowUser['prev_rea_n']) && $rowUser['prev_rea_n'] == 0) {
        echo '<input type="number" id="prev1" name="prev1" class="form-control" placeholder="' . date("Y") . '"  aria-describedby="basic-addon2" title="Veuillez selectionner une valeur valide. " onivalid="setCustomValidity(\'Utiliser les points au lieu des virgules.\')" oninput="this.setCustomValidity(\'\')" readonly>';
    } else {
        echo '<input type="number" id="prev1" name="prev1" class="form-control" placeholder="' . date("Y") . '"  aria-describedby="basic-addon2" title="Veuillez selectionner une valeur valide. " onvalid="setCustomValidity(\'Utiliser les points au lieu des virgules.\')" oninput="this.setCustomValidity(\'\')" value="' . (isset($rowUser['prev_rea_n']) ? $rowUser['prev_rea_n'] : null) . '" readonly>';
    }
} else {
    if (isset($rowUser['prev_rea_n']) && $rowUser['prev_rea_n'] == 0) {
        echo '<input type="number" id="prev1" name="prev1" class="form-control" placeholder="' . date("Y") . '"  aria-describedby="basic-addon2" title="Veuillez selectionner une valeur valide. " onvalid="setCustomValidity(\'Utiliser les points au lieu des virgules.\')" oninput="this.setCustomValidity(\'\')">';
    } else {
        echo '<input type="number" id="prev1" name="prev1" class="form-control" placeholder="' . date("Y") . '"  aria-describedby="basic-addon2" title="Veuillez selectionner une valeur valide. " onvalid="setCustomValidity(\'Utiliser les points au lieu des virgules.\')" oninput="this.setCustomValidity(\'\')" value="' . (isset($rowUser['prev_rea_n']) ? $rowUser['prev_rea_n'] : null) . '">';
    }
}

原代码的问题在于：

1. 事件名称拼写错误（onivalid/onvalid应为标准的oninvalid）
2. 任何验证失败场景都会触发固定提示，包括浏览器因区域设置判定输入点为无效的情况

修改后的代码 #

<?php
if (in_array($_SESSION['profil'], ['Consultation - Lecture seule', 'Consultation nationale', 'Pilote Investissement M2IO']) || ($_SESSION['profil'] == "Administrateur" && $_SESSION['code_etablissement'] == '02000')) {
    if (isset($rowUser['prev_rea_n']) && $rowUser['prev_rea_n'] == 0) {
        echo '<input type="number" id="prev1" name="prev1" class="form-control" placeholder="' . date("Y") . '"  aria-describedby="basic-addon2" title="Veuillez selectionner une valeur valide. " oninvalid="if(this.value.includes(',')) setCustomValidity(\'Utiliser les points au lieu des virgules.\'); else setCustomValidity(\'\')" oninput="this.setCustomValidity(\'\')" readonly>';
    } else {
        echo '<input type="number" id="prev1" name="prev1" class="form-control" placeholder="' . date("Y") . '"  aria-describedby="basic-addon2" title="Veuillez selectionner une valeur valide. " oninvalid="if(this.value.includes(',')) setCustomValidity(\'Utiliser les points au lieu des virgules.\'); else setCustomValidity(\'\')" oninput="this.setCustomValidity(\'\')" value="' . (isset($rowUser['prev_rea_n']) ? $rowUser['prev_rea_n'] : null) . '" readonly>';
    }
} else {
    if (isset($rowUser['prev_rea_n']) && $rowUser['prev_rea_n'] == 0) {
        echo '<input type="number" id="prev1" name="prev1" class="form-control" placeholder="' . date("Y") . '"  aria-describedby="basic-addon2" title="Veuillez selectionner une valeur valide. " oninvalid="if(this.value.includes(',')) setCustomValidity(\'Utiliser les points au lieu des virgules.\'); else setCustomValidity(\'\')" oninput="this.setCustomValidity(\'\')">';
    } else {
        echo '<input type="number" id="prev1" name="prev1" class="form-control" placeholder="' . date("Y") . '"  aria-describedby="basic-addon2" title="Veuillez selectionner une valeur valide. " oninvalid="if(this.value.includes(',')) setCustomValidity(\'Utiliser les points au lieu des virgules.\'); else setCustomValidity(\'\')" oninput="this.setCustomValidity(\'\')" value="' . (isset($rowUser['prev_rea_n']) ? $rowUser['prev_rea_n'] : null) . '">';
    }
}
?>

核心修改点 #

• 修正事件名称为oninvalid
• 将固定提示逻辑改为条件判断：仅当输入值包含逗号时，设置指定提示；其他验证失败场景清空提示，保留浏览器默认的错误提示逻辑
• 保留oninput事件，确保用户输入有效后提示自动清除

额外优化（可选） #

如果要彻底规避浏览器区域设置的影响，强制只允许数字和点输入，可以将输入框type改为text，并添加实时校验：

const input = document.getElementById('prev1');
input.addEventListener('input', function() {
    // 过滤非数字和点的字符
    this.value = this.value.replace(/[^0-9.]/g, '');
    // 确保最多一个小数点
    if (this.value.split('.').length > 2) {
        this.value = this.value.slice(0, -1);
    }
});

内容的提问来源于stack exchange，提问作者Valery