Question

我想從輸入中移除所需的屬性。一般的想法是我有一個設置爲必需的字段，該字段具有模式屬性的自定義驗證。當用戶點擊一個按鈕時，我試圖刪除必填字段。

我在這裏把一個小提琴： 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); 
});