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

认为你是因为oninvalid处理程序中的代码而得到这个。试试这个。

<input type="submit" value="Log In" class="LogInButton">

Answer 2

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

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

Answer 3

我确实看过小提琴，唯一可以获得你想要的行为的方法是通过字面分离，克隆和重新插入字段。作品tho。

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

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

HTML5必需的输入，删除和添加即时无效

3 个答案: