仅在元素显示时才需要必填字段

Question

我有一个表格，询问用户是否有单选按钮形式的授权代表。如果用户选择 'yes' 选项，它将显示有关代表的更多字段，并且它有一个必需的输入 'representative email'。

有没有办法让它只在用户选择是选项时才需要？表单未提交，因为如果用户选择 'no option'.

，它会不断查找此必填字段的值

<form>

<div class="onBehalfOf">
<input type="radio" checked="checked" name="Radio" id="yes" value="Yes">
<label for="yes"> Yes</label>
<input type="radio" name="Radio" id="no" value="No">
<label for="no"> No</label>
</div>

<div class="authorizedRep">
Email:
<input type="email" required />
</div>

<input type="submit" label="submit" />

</form>

js Fiddle Example

Answer 1

当您 show/hide 字段时，稍作更改即可切换电子邮件输入的 required 属性。您只需要在元素中添加适当的 emailInput class。

$('.onBehalfOf input:radio').change(function() {
  if ($(this).is(':checked') && $(this).val() == 'No') {
    if ($('.authorizedRep').hasClass("hide")) {

    } else {
      $('.authorizedRep').addClass("hide");
      $('.emailInput').removeAttr('required');
    }
  }

  if ($(this).is(':checked') && $(this).val() == 'Yes') {
    $('.authorizedRep').removeClass("hide");
    $('.emailInput').attr('required');
  }
});

仅在元素显示时才需要必填字段

required fields should only be needed upon element display

javascript

html

required