HTML5验证在symfony twig中不起作用

Question

我需要带一个包含9位数字的ID号和一个字母。 我的正则表达式看起来很安静，但验证没有按预期发生。

我的输入标签如下所示。

我正在使用symfony树枝

<input type="text" 
    id="register_idNumber" 
    placeholder="NIC Number" 
    onkeypress="isInputNumber(event)" 
    pattern="^[0-9]{9}[a-zA-Z]$" 
    value="{{ form.idNumber.vars.value }}" 
    name="register[idNumber]" 
    required="required" 
    class="form-control" 
    oninvalid="this.setCustomValidity('Not a valid ID number! ')"
/>
<div class="input-group-append">

Answer 1

使用事件处理程序的内联版本经常使我们忽略了正确操作所需的逻辑。

如果你要在任何错误上使用.setCustomValidity() ，它将永远设置在该元素上。 您的输入将永远不正确，因为您这样设置。

请注意下面的代码，并通过代码添加事件处理程序，以便在发生正确输入后支持必要的错误消息删除。

 const idNumber = document.querySelector('input'); const form = document.querySelector('form'); const out = document.getElementById('output'); idNumber.addEventListener('input', () => { out.style.display = "none"; idNumber.setCustomValidity(''); idNumber.checkValidity(); }); idNumber.addEventListener('invalid', () => { if (idNumber.value === '') { idNumber.setCustomValidity('Enter your id!'); } else { idNumber.setCustomValidity('Must be 9 digits followed by one letter.'); } }); form.addEventListener('submit', e => { out.style.display = "block"; e.preventDefault() }); 

 #output{display:none} 

 <form> <input type="text" id="register_idNumber" placeholder="NIC Number" onkeypress="" pattern="^[0-9]{9}[a-zA-Z]$" value="" name="register[idNumber]" required="required" class="form-control" /> <button type="submit">Submit</button> </form> <div id="output">Form submitted.</div> 

或者，不要使用内联事件处理程序。