Materialise css 模态验证

Question

我正在使用 Materialise css 来设计我的 post。假设我有一个模态表单，我和 post 它到服务器。在那种形式下，我正在检查所有字段是否都有价值。

<form>
            <div class="input-field">
                <input type="text" id="title"  class="validate" required="" aria-required="true">
                <label for="title">Title</label>
            </div>

标题字段为必填项。但是，当我在模式中单击提交按钮时，即使标题字段为空值，它也会关闭。有没有什么办法可以在 Materialize css v1.

中为验证错误保持模式打开

Answer 1

想想这是在不同的步骤。表单提交只发生在链的末端，当我们的标准被满足时。

用户提交表单
我们检查表格
我们反馈给用户

根据第 2 步的结果，我们可以返回到第 1 步，或者继续第 3 步。

模态结构：

  <div id="modal1" class="modal">
    <div class="modal-content">
      <div class="input-field">
         <input type="text" id="title"  class="validate" required="" aria-required="true">
         <label for="title">Title</label>
         <span class="helper-text" data-error="Please enter your name" data-success="Thankyou!"></span>
        </div>
    </div>
    <div class="modal-footer">
      <a id="submit-button" href="#!" class="btn">Submit</a>
      <a href="#!" class="btn modal-close waves-effect waves-red red">close</a>
    </div>
  </div>

根据 documentation.

，我们为用户反馈添加了可选的 helper-text 跨度

Javascript:

document.addEventListener('DOMContentLoaded', function() {
    
    // init modal
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems);
  
    // get button
    var button = document.querySelector('#submit-button');
  
    // Run our own function when clicked
    button.addEventListener("click", checkForm);
  
    // Function checks for input
  
    function checkForm() {
      var input = document.querySelector('#title');
      
      if(input.value) {
        
        // submit form
        
        // add valid class to show helper
        input.classList.add('valid');
        // close modal
        instances[0].close();
        // clear form
        input.value = '';
        // remove valid class
        input.classList.remove('valid');
      } else {
        // prompt user for input
         input.classList.add('invalid');
      }
    }
  
  
  });

我们获取文本输入的值，并在此基础上添加 valid 或 invalid class - 这是隐藏或显示的内置实体化内容我们在 data-error 和 data-success.

中设置的相关消息

您唯一需要添加的是实际的表单提交 - 所以像 form.submit().

Codepen.

Materialise css 模态验证

Materialize css modal validation

css

materialize