使用 jQuery 将 Required 属性添加到 MaterializedCSS Select

Question

我正在尝试使用jQuery将required属性添加到materializedcss选择输入中。

$(document).ready(function() {
  $('select').material_select();
  $("#my_button").click(function() {
    $("#my_select").prop('required', true);
    $("#email").prop('required', false);
  });
});

@import "https://fonts.googleapis.com/icon?family=Material+Icons";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
<div class="container">
  <div class="row">
    <form class="col s12">
      <div class="input-field col s12 required">
        <select id="my_select">
            <option value="" disabled selected>Choose your option</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </select>
        <label>Materialize Select</label>
      </div>
      <div class="input-field col s12">
        <input id="email" type="email" class="validate">
        <label for="email">Email</label>
      </div>
      <a id='my_button' class="waves-effect waves-light btn">button</a>
      <button class="btn  waves-effect waves-light" type="submit" name="action">Submit
        <i class="material-icons right">send</i>
      </button>
    </form>
  </div>
</div>

查看 DOM 属性添加正常，但由于某种原因，验证似乎无法正确进行。当我直接添加"必需"属性时，验证工作正常。

有一些代码可以使验证看起来不错(从这里开始(，但没有它，结果是一样的。我对此相对较新，因此希望得到任何线索。谢谢

Answer 1

你写了$("#email").prop('required', false);这就是为什么它没有将 required 添加到该 input 元素中，并将 email 作为 id。

更改此行：

$("#email").prop('required', false);

自

$("#email").prop('required', true);

并且required将在单击my_button时添加。