Как я могу сделать Materialise CSS Select обязательным?

Question

Моя проблема в том, что мой выбор не отправляет мне сообщение об ошибке, если ничего не выбрано, потому что в этом случае «Ich bin ...», это отключенная опция. Это не позволяет мне завершить регистрацию, и это здорово, но не выдает сообщение об ошибке ...

Так что теперь я спрашиваю себя: как я могу сделать свое сообщение об ошибке select throw, когда ничего (или в этом случае) "Ich bin ...") выбран?

U можете посетить страницу здесь: 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

Достижение того, что вы спрашиваете в Materialise, довольно сложно и требует взлома.

Причина в том, что отдельные элементы не имеют те же свойства проверки, что и текстовые вводы. (И как примечание - вы никогда не должны полагаться исключительно на валидацию Materialise - это действительно только для UX / эстетики). Materialise фактически скрывает собственный выбор и заменяет его текстовым вводом и выпадающим списком.

Хак:

Чтобы сделать выбор вести себя как традиционный ввод текста, мы можем используйте jQuery для манипулирования dom и вставьте вспомогательное поле проверки (взято из текстового ввода документация - запомните, ввод текста поддерживает проверку):

// 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);

Далее, logi c. Я заменил ваш ввод [type = submit] стандартной кнопкой - это так, чтобы мы могли выполнять нашу логику c и отправлять форму только тогда, когда мы будем довольны. Когда выбирается опция выбора (в данном случае это раскрывающийся список li), класс lipped добавляется в 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 здесь . Вы должны всегда выполнять более строгую проверку и проверку ваших форм, особенно если ввод идет в базу данных.