我如何使MaterializeCSS Select成为必需的？

Question

我的问题是，如果未选择任何内容，我的选择不会向我发送错误消息，因为在这种情况下，“ Ich bin ...”是禁用的选项。它没有让我完成注册，这很好，但是没有抛出错误消息...

所以现在我问自己：如果什么也没有选择（或者在这种情况下为“ Ich bin ...”），如何显示我的选择抛出错误消息？

您可以在这里访问页面：https://projekte.tgm.ac.at/3ahit/smeth/02BREC/Minishop/index.php?site=register

<form action="index.php?site=index_logout" method="post">
  <div class="card-panel z-depth-5">
    <div class="row">
      <h4 class="center">Registrieren</h4>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <input name="username" id="username" type="text" class="validate" required>
        <label for="username">Username</label>
      </div>
      <div class="input-field col s12">
        <input name="password" id="password" type="password" class="validate" required>
        <label for="password">Password</label>
      </div>
      <div class="input-field col s6">
        <input name="first_name" id="first_name" type="text" class="validate" required>
        <label for="first_name">First Name</label>
      </div>
      <div class="input-field col s6">
        <input name="last_name" id="last_name" type="text" class="validate" required>
        <label for="last_name">Last Name</label>
      </div>
      <div class="input-field col s12">
        <select name="gender" id="test" required>
          <option value="" disabled selected>Ich bin...</option>
          <option value="1">männlich</option>
          <option value="2">weiblich</option>
          <option value="3">andere</option>
        </select>
      </div>
      <div class="input-field col s12">
        <input name="birthdate" type="text" class="datepicker" required>
        <label for="birthdate" class="">Birthdate</label>
      </div>
      <div class="input-field col s12">
        <input name="mail" id="email" type="email" class="validate" required>
        <label for="email">Email</label>
      </div>
      <div class="input-field col s12">
         <p>
           <label>
             <input name="newsletter" type="checkbox" class="filled-in" checked="checked" />
             <span>Newsletter</span>
           </label>
         </p>
       </div>
     </div>
     <div class="row">
       <div class="col s12">
         <input type="submit" name="submit" value="Registrieren"
                                    class="btn left col s12 brown lighten-2">                             
       </div>
     </div>
     <div class="row">
       <div class="col s12">
         <p class="center">Sie haben bereits ein Konto?
           <a class="modal-trigger" href="index.php#login">Anmelden</a>
         </p>
       </div>
     </div>
   </div>
 </form>

Answer 1

在Materialize中实现您的要求非常棘手，并且需要黑客。

原因是，选择元素与文本输入的验证属性不同。 （此外，您永远不应仅依赖Materialize验证-实际上仅适用于UX /美学）。 Materialize实际上隐藏了本机选择，然后将其替换为文本输入和下拉菜单。

The hack：

为了使选择的行为像传统的文本输入一样，我们可以使用jQuery操纵dom并插入验证帮助字段（取自文本输入documentation-记住文本输入支持验证）：

// Create your validation helper text
var validationMessage = '<span class="helper-text" data-error="Please choose an option"></span>';

// Place it in the dom
$('.select-wrapper input').after(validationMessage);

接下来，逻辑。我已经用标准按钮替换了您的输入[type = submit]-这是为了使我们能够执行逻辑并仅在满意时提交表单。当选择选择选项（在这种情况下，为下拉li）时，将一类选择项添加到li。因此，一旦按下了“提交”按钮，我们就会在下拉列表中检查所有具有选定类的li（不是禁用的占位符选项），如果没有，则向动态创建的文本输入中添加一类无效类。

// Get the dynamically created text input

var select = jQuery('.select-wrapper input')[0];

// Check if any of the dropdown options have a class of selected

$('.submit-btn').on('click',function(){
   if ( jQuery('ul.select-dropdown li:not(.disabled).selected').length < 1 ) {
      $(select).addClass('invalid');
   }          
});

Codepen here。您应该始终执行更严格的验证并检查表单，特别是如果输入要进入数据库。