HTML5必要な入力、削除、追加は機能していません

Question

オンザフライで入力から必要な属性を削除しようとしています。一般的な考え方では、必須フィールドに設定されているフィールドがあります。このフィールドには、pattern属性でカスタム検証があります。ユーザーがボタンをクリックすると、必要なフィールドを削除しようとしています。

私は一緒にここにフィドルを入れている： https://jsfiddle.net/paulmatos/t1p1wub3/

HTML：

<form> 

    <input type="text" oninvalid='this.setCustomValidity("Enter a number in the Specified Range");' oninput="try{setCustomValidity('')}catch(e){}" pattern="[0-9]" required="required" name="password" id="password" /> 

    <input type="text" required="required" name="temp" /> 

    <input type="submit" class="btn btn-primary form-control" value="Submit" /> 

    <div class="btn btn-default removeReq">Remove Required</div> 

</form> 

のjQuery：

$('.removeReq').click(function() { 
    $('#password').removeAttr('required'); 
}); 

私が経験しています問題は、提出の順序に関係しています。

削除をクリックしてフォームを送信すると、意図したとおりに動作することがわかります。 これらの手順を逆の順序で実行する場合は、最初にサブミットをクリックしてから、もう一度削除してからサブミットしても、最初の入力に対して検証エラーが表示されます。

この目的の機能でこれを回避する方法はありますか。これをhtml5検証だけで動作させようとしています。

Answer 1

私はバイオリンを見ていたし、私はあなたが望んでいた動作を得ることができる唯一の方法は、文字通り取り外すことだった、クローニングおよびフィールドを再挿入する。あなたの作品。

$('.removeReq').click(function() { 
    var password = $('#password').removeAttr('required oninvalid oninput pattern').detach().clone(); 
    $('form').prepend(password); 
}); 

https://jsfiddle.net/t1p1wub3/2/

Answer 2

これは、oninvalidハンドラのコードが原因であると考えられます。これを試して。

$('.removeReq').click(function() { 
    $('#password').removeAttr('required oninvalid'); 
}); 

Answer 3

あなたは）（代わりにremoveAttのこれを試すことができます。

$('.removeReq').click(function() { 
    $('#password').prop('required', false); 
});