HTML5必需的输入，移除和添加上飞不工作

我想从输入中移除所需的属性。一般的想法是我有一个设置为必需的字段，该字段具有模式属性的自定义验证。当用户点击一个按钮时，我试图删除必填字段。HTML5必需的输入，移除和添加上飞不工作

我在这里把一个小提琴： 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验证工作。

来源

2017-02-02 Paul Matos

我看看小提琴，我能得到你想要的是按字面分离，克隆行为的唯一途径，重新插入该字段。工作寿。

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

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

来源

2017-02-02 18:21:27 Booboobeaker

完美地工作。感谢您的帮助。 –

认为你得到这个由于oninvalid处理程序中的代码。尝试这个。

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

来源

2017-02-02 18:13:36 Paul

不幸的是这个问题持续了我。 –

你可以试试这个，而不是removeAtt（）：

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

来源

2017-02-02 18:13:45

不幸的是，问题仍然存在。 –

回答

相关问题