javascript - HTML JavaScript - 带有额外/可选字段的表单问题

Question

我有一个表单，如果用户从选择输入中选择"is"，则会显示额外的字段。这些额外字段都是必需的，除非用户选择“否”，在这种情况下，这些字段将被隐藏，并且必需的属性将被删除。它有效，但是我遇到了一个问题，如果用户选择"is"，然后恢复为“否”，则表单将不会提交，大概是因为它没有删除必需的属性并且仍然需要字段需要填写。如果有人可以帮助解决这个问题，我们将不胜感激。

HTML:

<form id="auth_form" method="post" action="action.php">

  <div class="form-group">
    <label class="control-label">Defect?</label>
    <select class="select form-control" id="defect" name="defect">
      <option id="No" value="No">No</option>
      <option id="Yes" value="Yes">Yes</option>
    </select>
  </div>

  <div id="extra" name="extra" style="display: none">

    <label class="control-label" for="desc">Description</label>
    <input class="form-control" type="text" id="desc" name="desc" required disabled>
    <br>
    <div class="form-group has-feedback" name="auth_code" id="auth_code">
      <label for="auth_code10" class="control-label">
        Authorisation Code</label>
      <input class="form-control" id="auth_code_input" autocomplete="new-password" name="auth_code_input" type="password" required disabled>
      <span class="form-control-feedback glyphicon" id="iconBad"></span>
    </div>

  </div>

  <hr>

  <div class="form-group">
    <button class="btn btn-info" id="submit" name="submit" type="submit">Submit
    </button>
  </div>

</form>

JavaScript:

$(document).ready(function() {

  $("#defect").on("change", checkIfYes);

  // Functions

  function checkIfYes() {
    if (document.getElementById('defect').value == 'Yes') {

      // show extra fields & make them required
      document.getElementById('extra').style.display = '';
      document.getElementById('auth_code_input').disabled = false;
      document.getElementById('desc').disabled = false;

      $('#auth_code_input').blur(function() { // validate the extra fields
        if (!ValidateInput()) {
          e.preventDefault();
        }
      });

      $('#auth_form').on('submit', function(e) { // validate the extra fields
        if (!ValidateInput()) {
          e.preventDefault();
        }
      })

    } else { // hide and disable extra fields so form can submit
      document.getElementById('extra').style.display = 'none';
      document.getElementById('auth_code_input').disabled = true;
      document.getElementById('desc').disabled = true;
    }

  }

  function ValidateInput() {
    var code = ['Foo', 'Bar']; // user must enter one of these
    var IsValid = false;
    var input = $('#auth_code_input').val()

    if (code.indexOf(input) > -1) { // if input equals one of the codes in the array
      $('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok');
      IsValid = true;
    } else {
      $('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove');
      IsValid = false;
    }

    return IsValid;
  }

});

JSFiddle

Answer 1

您的问题在这里:

if (document.getElementById('defect').value == 'Yes') {
//.....
  $('#auth_form').on('submit', function(e) { // validate the extra fields
    if (!ValidateInput()) {
      e.preventDefault();
    }
  })

如果用户单击yes #auth_form 绑定(bind)到阻止提交的函数。但点击否后，没有办法将其改回来。

if (document.getElementById('defect').value == 'No') {
   $('#auth_form').off('submit');
});