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

Question

I am trying to remove a required attribute from an input on the fly. The general idea is I have a field that is set to required, this field has custom validation with the pattern attribute. When the user clicks a button I am attempting to remove the required field.

I have put together a fiddle here: 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');
});

The issue I am experiencing has to do with the order of submission.

If you click remove required, and then submit the form you will see that it works as intended. However, if you do those steps in reverse order, click submit first, then remove and try and submit again, you will notice I am still getting the validation error on the first input.

Is there anyway to get around this with this intended functionality, I am trying to get this to work just with the html5 validation.

Answer 1

Think you are getting this due to the code in the oninvalid handler. Try this.

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

Answer 2

You can try this instead of removeAtt():

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

Answer 3

I did have a look at the fiddle and the only way I could get the behaviour you wanted was by literally detaching, cloning and reinserting the field. Works tho.

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

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