爲了驗證是否有可能在按鍵事件

Question

這裏使用模式屬性是我的代碼：Codepen

沒有任何腳本，在表單驗證錯誤消息顯示提交

<form> 
    <input type="text" name="text1" placeholder="min-8, max-16, a-z, A-Z" pattern="^[a-zA-Z]{8,16}$" required> 
    <input type="submit"> 
</form> 

難道我們能夠證明驗證在按鍵小腳本形式之前錯誤消息提交 ....

所以對於我曾經嘗試這樣做，但沒有用

HTML

<form> 
    <input type="text" name="text2" class="numberValid" placeholder="min-4, max-4, 0-9" pattern="^[0-9]{4}$" required> 
    <input type="submit"> 
</form> 

SCRIPT提前

$('.numberValid').on('keypress', function() { 
    this.setCustomValidity(''); 
}); 

感謝

Answer 1

您可以測試每個keyup事件（人物解僱後輸入值已被添加到輸入，keypress被解僱之前...）。

或者如評論中指出的那樣，當輸入值改變時，可以使用更適合的input事件。

$('document').ready(function() { 
 
    $('.numberValid').on('input', function() { 
 
     re = new RegExp(this.pattern); 
 
     str = $(this).val(); 
 
     $('label').toggle(!re.test(str)); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" name="text2" class="numberValid" placeholder="min-4, max-4, 0-9" pattern="^[0-9]{4}$" required> 
 
    <label for="text2">Please enter 4 digits</label> 
 
    <br/> 
 
    <input type="submit"> 
 
</form>

爲了只在第一次按鍵顯示錯誤，就隱藏當DOM加載標籤：上（ '輸入'）

$('document').ready(function() { 
 
    $('label').hide(); 
 
    $('.numberValid').on('input', function() { 
 
    re = new RegExp(this.pattern); 
 
    str = $(this).val(); 
 
    $('label').toggle(!re.test(str)); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" name="text2" class="numberValid" placeholder="min-4, max-4, 0-9" pattern="^[0-9]{4}$" required> 
 
    <label for="text2">Please enter 4 digits</label> 
 
    <br/> 
 
    <input type="submit"> 
 
</form>