Question

好的，所以我已经检查了其他问题，但没有人对我提出的问题有答案。只是要清楚。

所以，我正在使用 Materialisecss 和 JQuery 。以下是我希望条件所需的textarea字段！

<div class="col s12 input-field" style="margin-bottom:17px;margin-left:-12px;">
    <input type="checkbox" id="sslTypeToggle" name="sslType" />
    <label for="sslTypeToggle">I already have SSL Certificate.</label>
</div>
<div id="customSSL" style="display:none;">
    <div class="col s12 input-field">
        <textarea id="certificate" name="certificate" class="materialize-textarea"></textarea>
        <label for="certificate">Paste Your Certificate</label>
    </div>
    <div class="col s12 input-field">
        <textarea id="privateKey" name="privateKey" class="materialize-textarea"></textarea>
        <label for="privateKey">Paste Your Private Key</label>
    </div>
    <div class="col s12 input-field">
        <textarea id="chain" name="chain" class="materialize-textarea"></textarea>
        <label for="chain">Paste Your Chain File (CA Bundle)</label>
    </div>
</div>

这是我正在使用的Jquery！

$('#sslTypeToggle').on('change',function()
{
    if(this.checked)
    {
        $("#certificate").prop('required',true);
        $("#privateKey").prop('required',true);
        $("#chain").prop('required',true);
        $('#customSSL').fadeIn('fast');
    }
    else
    {
        $("#certificate").prop('required',false);
        $("#privateKey").prop('required',false);
        $("#chain").prop('required',false);
        $('#customSSL').fadeOut('fast');
    }
});

我不知道出了什么问题。当我检查Inspect元素时，我可以在required中看到<textarea>属性但是，我仍然可以在不输入任何内容的情况下提交表单！不知道出了什么问题！

更新：所有答案均无效。也许是因为我是Jquery并且还使用JQuery提交表单！现在，我正在使用服务器端验证！

Answer 1

如果字段被隐藏，您应该节点，不应用所需的属性。

所以你真正需要做的就是在所有textareas上放置required属性并绑定复选框以显示或隐藏父div：

$('#sslTypeToggle').click( function() {
    this.checked && $('#customSSL').fadeIn('fast') || $('#customSSL').fadeOut('fast');;
});

但是为了回答你的问题，jQuery在选择带有id选择器的元素时没有设置必需的属性。作为解决方法，您可以通过索引访问dom节点并直接设置.required属性。

试试这个

$(id)[0].required = checked;

$('#sslTypeToggle').click( function() {
  var checked=this.checked;
  ["#certificate","#privateKey","#chain"].forEach(function(id)
  {
     $(id)[0].required = checked;
  });
  checked && $('#customSSL').fadeIn('fast') || $('#customSSL').fadeOut('fast');;
 
});
$('#sslTypeToggle').click();
$('form').submit(function() { alert('Form Submitted'); return false;});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="col s12 input-field" style="margin-bottom:17px;margin-left:-12px;">
      <input type="checkbox" id="sslTypeToggle" name="sslType"/>
      <label for="sslTypeToggle">I already have SSL Certificate.</label>
  </div>
  <div id="customSSL">
      <div class="col s12 input-field">
          <textarea id="certificate" name="certificate" class="materialize-textarea"></textarea>
          <label for="certificate">Paste Your Certificate</label>
      </div>
      <div class="col s12 input-field">
          <textarea id="privateKey" name="privateKey" class="materialize-textarea"></textarea>
          <label for="privateKey">Paste Your Private Key</label>
      </div>
      <div class="col s12 input-field">
          <textarea id="chain" name="chain" class="materialize-textarea"></textarea>
          <label for="chain">Paste Your Chain File (CA Bundle)</label>
      </div>
  </div>
  <input type="submit"/>
</form>

注意：以下行仅用于演示目的。如果您在代码中保留该行，则表单实际上不会提交。

$('form').submit(function() { alert('Form Submitted'); return false;});

为什么Textarea中的必需属性不起作用？

1 个答案: