文章/答案/技术大牛

发布

社区首页 >问答首页 >snackbar验证MDL - Javascript/Jquery

问snackbar验证MDL - Javascript/Jquery
EN

Stack Overflow用户

提问于 2016-11-21 10:22:55

回答 1查看 743关注 0票数 3

如果输入字段为空，我想显示snackbar。也许可以用Snackbar/Toast替换默认的html5所需的验证。这里我的代码：

<body>

<!-- The drawer is always open in large screens. The header is always shown, even in small screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <button class="mdl-layout__drawer-button" onclick="window.location.href='index.html';">
      <i class="material-icons">arrow_back</i>
    </button>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Cek e-KTP</span>
      <div class="mdl-layout-spacer"></div>
    </div>
  </header>
  <main class="mdl-layout__content">
    <div class="page-content">
    <!-- Your content goes here -->
        <form id="dx_form" name="dx_form" class="dx_form" action="#" method="post">
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input class="mdl-textfield__input" type="text" id="no_mohon" name="no_mohon" style="text-transform:uppercase">
                <label class="mdl-textfield__label" for="no_mohon">Masukan Nomor Permohonan e-KTP</label>
            </div>
                <div class="mdl-layout-spacer"></div>
                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Cek</button>
                <div class="mdl-layout-spacer"></div>
        </form>
    <!-- Your content goes here -->
    </div>
  </main>
    <footer class="dx_footer">
        <div class="mdl-grid">
          <div class="mdl-cell mdl-cell--1-col">
            <button class="mdl-button mdl-js-button mdl-button--icon" onclick="window.location.href='ktp.html';">
              <i class="material-icons">credit_card</i>
            </button>
            <div class="mdl-layout-spacer"></div>
            e-KTP
          </div>
          <div class="mdl-cell mdl-cell--1-col">
            <button class="mdl-button mdl-js-button mdl-button--icon" onclick="window.location.href='kk.html';">
              <i class="material-icons">chrome_reader_mode</i>
            </button>
            <div class="mdl-layout-spacer"></div>
            KK
          </div>
          <div class="mdl-cell mdl-cell--1-col">
            <button class="mdl-button mdl-js-button mdl-button--icon" onclick="window.location.href='info.html';">
              <i class="material-icons">info_outline</i>
            </button>
            <div class="mdl-layout-spacer"></div>
            Info
          </div>
          <div class="mdl-cell mdl-cell--1-col">
            <button class="mdl-button mdl-js-button mdl-button--icon" onclick="window.location.href='devs.html';">
              <i class="material-icons">developer_board</i>
            </button>
            <div class="mdl-layout-spacer"></div>
            Devs.
          </div>
        </div>
    </footer>
</div>
</body>

如果inputfield为空，如何显示mdl snackbar验证？任何帮助都将不胜感激。谢谢。

javascript

jquery

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-11-21 11:43:45

//your button
<button onclick="validate()"></button>

function validate() {
    if(document.getElementById('no_mohon').value == "" || document.getElementById('no_mohon').value == null || document.getElementById('no_mohon').value == undefined) {
        //get the snackbar
        var notification = document.querySelector('.mdl-js-snackbar');
        //creating data for snackbar notification
        var data = {
            message: 'Please make sure you filled in all the required fields.',
            timeout: 3000
        }
        //pushing the notification to the screen
        notification.MaterialSnackbar.showSnackbar(data);
    } else {
        //do form post action here
    }
}

编辑将属性添加到if语句.中。

编辑添加了一种将代码重用到更多字段的方法，

//your button
<button onclick="validate(this.id, 'message string here')"></button>

function validate(id, msg) {
    if(document.getElementById(id).value == "" || document.getElementById(id).value == null || document.getElementById(id).value == undefined) {
        //get the snackbar
        var notification = document.querySelector('.mdl-js-snackbar');
        //creating data for snackbar notification
        var data = {
            message: msg,
            timeout: 3000
        }
        //pushing the notification to the screen
        notification.MaterialSnackbar.showSnackbar(data);
    } else {
        //do form post action here
    }
}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40717834

复制

相似问题

问snackbar验证MDL - Javascript/Jquery
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问snackbar验证MDL - Javascript/JqueryEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问snackbar验证MDL - Javascript/Jquery
EN