2

HTML5 フォームの検証に関して、2 つの大きな問題があります。

1-このコードを使用して、入力の検証メッセージを変更します

$$('INPUT').each(function(input) 
{    
  input.oninvalid = function(event) 
  {
     event.target.setCustomValidity('');
     if (!event.target.validity.valid) event.target.setCustomValidity('Please Fill');
  };
}

この方法には大きな問題があります。入力が無効な場合はフォームが送信されるため、エラー メッセージが添付されます。そのため、 new input では検証されません。修正して再度送信しても、メッセージが添付されているため、フォームが送信されません。したがって、 event.target.setCustomValidity('') はメッセージを削除し、フォームは別の送信を必要とします。2つは修正後に提出します。

この動作を修正する方法が見つかりませんでした。

2-これらのツールチップを完全に非表示または無効にしながら、フォーム検証を使用するにはどうすればよいですか? css の無効な疑似クラスと有効な疑似クラスを使用したい場合がありますが、これらのヒントは引き続き表示されます。

送信ボタンでformnovalidateを見つけると、送信する前に各入力の valid.valid を手動で確認できます。より良いアイデアはありますか？

4

2 に答える 2

0

質問1に関して：

入力がありました

<input name="VoucherCode"  id="VoucherCode"  type="text" pattern="(1[0-9]{9})|(2[0-9]{9})" value="">

デフォルトメッセージの改善

$("#VoucherCode").on("invalid", function (event) {
    event.target.setCustomValidity('The format of Voucher Code is not correct.')
});

しかし、これにはあなたが遭遇したのと同じ問題がありました: ユーザーが最初の試行を間違えた場合、正しい応答でも無効なパターン メッセージが表示されます。

@Pointyの提案に基づいてこれを修正しました：

$("#VoucherCode").on("invalid", function (event) {
    event.target.setCustomValidity('The format of Voucher Code is not correct.')
}).bind('blur', function (event) {
    event.target.setCustomValidity('');                
});
于 2016-09-26T11:47:33.237 に答える