具体化css模式验证_Css_Materialize

具体化css模式验证

css

具体化css模式验证,css,materialize,Css,Materialize,我正在使用物化css来设计我的帖子。假设我在modal中有一个表单，并将其发布到服务器。在这种形式下，我检查所有字段是否都有值 <form> <div class="input-field"> <input type="text" id="title" class="validate" required=""

我正在使用物化css来设计我的帖子。假设我在modal中有一个表单，并将其发布到服务器。在这种形式下，我检查所有字段是否都有值

<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中，是否有任何方法可以保持模式为验证错误打开。

在单独的步骤中考虑这一点。只有在满足我们的标准时，表单提交才会在链的末尾进行

用户提交表单

我们检查一下表格

我们将反馈给用户

根据第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>

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');
      }
    }
  
  
  });

我们获取文本输入的值，并在此基础上添加一个

有效的

或

无效的

类-这是内置的物化内容，隐藏或显示我们在

数据错误

和

数据成功

中设置的相关消息

您唯一需要添加的是实际的表单提交，例如

form.submit（）