jQuery 到 show/hide 必填密码字段

Question

我有一个表格可以更改用户的个人详细信息。在此表单中，我允许用户更改他们的电子邮件 and/or 密码。使用 jQuery 我想在检测到这些字段之一发生更改时显示 'Current Password' 字段。

对于电子邮件字段，这意味着当它被更改时，密码字段会出现，但当电子邮件重新正确输入时，它会再次隐藏自己。

对于密码字段，这意味着只要在字段中输入任何内容，它就会显示出来。

我掌握了基础知识，但我无法让它们相互配合。因此，当我更改两者并改回一个时，“当前密码”字段会自行隐藏。

let requiredSet;

$('.js-show-target-on-change').on('input', function() {
  const target = $('.js-show-target-on-change__target');
  let currentValue = $(this).val();

  if ( $(this).data('type') === 'email' ) {
    const emailValue = $(this).data('value');

    if ( currentValue !== emailValue && !requiredSet === true ) {
      target.show();
      target.find('input').prop('required', true);

      requiredSet = true;
    } else if ( currentValue === emailValue ) {
      target.hide();
      target.find('input').prop('required', false);

      requiredSet = false;
    }
  } else {
    if ( !requiredSet === true ) {
      target.show();
      target.find('input').prop('required', true);

      requiredSet = true;
    } else if ( !currentValue.length ) {
      target.hide();
      target.find('input').prop('required', false);

      requiredSet = false;
    }
  }
});

JsFiddle

我很想得到一些帮助，因为我已经被困了这么久...提前致谢！

Answer 1

使用属性指定输入值已更改，稍后使用该属性切换输入元素的可见性。

$('.js-show-target-on-change').on('input', function() {
  const target = $('.js-show-target-on-change__target');
  let currentValue = this.value;

  // if input is email
  if (this.id === 'email') {
    // get default value
    let defValue = $(this).data('value');
    // set attribute value based on old and default value
    $(this).attr('data-changed', defValue !== currentValue);
  } else {
    // if password field then set attribute based on length
    $(this).attr('data-changed', currentValue.length > 0);
  }

  // check number of changed fields 
  let visible = $('input[data-changed="true"]').length > 0;

  // toggle based on the value
  target.toggle(visible);
  target.find('input').prop('required', visible);

});

$('.js-show-target-on-change').on('input', function() {
  const target = $('.js-show-target-on-change__target');
  let currentValue = this.value;

  // if input is email
  if (this.id === 'email') {
    // get default value
    let defValue = $(this).data('value');
    // set attribute value based on old and default value
    $(this).attr('data-changed', defValue !== currentValue);
  } else {
    // if password field then set attribute based on length
    $(this).attr('data-changed', currentValue.length > 0);
  }

  // check number of changed fields 
  let visible = $('input[data-changed="true"]').length > 0;

  // toggle based on the value
  target.toggle(visible);
  target.find('input').prop('required', visible);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" accept-charset="UTF-8" enctype="multipart/form-data" class="c-form">
  <div class="c-form__row">
    <label class="c-form__label" for="email">Email</label>
    <div class="c-form__field">
      <div class="c-input__control">
        <input required class="c-input js-show-target-on-change" data-type="email" type="email" id="email" name="email" value="info@johndoe.com" data-value="info@johndoe.com">
      </div>
    </div>
  </div>

  <div class="c-form__row">
    <label class="c-form__label" for="newPassword">New password</label>
    <div class="c-form__field">
      <div class="c-input__control">
        <input class="c-input js-show-target-on-change" type="password" id="newPassword" name="newPassword">
      </div>
    </div>
  </div>

  <div class="c-form__row js-show-target-on-change__target" style="display: none;">
    <label class="c-form__label" for="currentPassword">
      Current password
      <span class="u-warning">(required to change email or password)</span>
    </label>
    <div class="c-form__field">
      <div class="c-input__control">
        <input class="c-input" type="password" id="currentPassword" name="password">
      </div>
    </div>
  </div>

  <div class="c-form__submit">
    <button class="c-button c-button--fullwidth" type="submit">Save</button>
  </div>
</form>

Answer 2

编辑：下面是对代码工作原理的描述：

cost email = $('#email').val() // get the starting value of the email 
                               // field to check if it has changed
$('.js-show-target-on-change').on('input', function(){

    const f = $('#email').val() !== email 
        // check if the old email value is different than the new email value

        || $('#newPassword').val().length > 0 
        // check if there is text in the new password field

        ? 'show' : 'hide'; 
        // if one of the above statements are true,show the field, else hide it

    $('.js-show-target-on-change__target')[f](); 
    // update the field based on the above condition
});

如果我正确理解您的用例，则以下代码应该可以完成工作：

const email = $('#email').val();
$('.js-show-target-on-change').on('input', function() {
  const f = $('#email').val() !== email || $('#newPassword').val().length > 0 ? 'show' : 'hide';
  $('.js-show-target-on-change__target')[f]();
});

jQuery 到 show/hide 必填密码字段

jQuery to show/hide required password field

javascript

forms

jquery

jsfiddle