小吃店验证 MDL - Javascript/Jquery
Posted
技术标签:
【中文标题】小吃店验证 MDL - Javascript/Jquery【英文标题】：snackbar validation MDL - Javascript/Jquery 【发布时间】：2017-04-04 17:02:41 【问题描述】：如果输入字段为空，我想显示小吃栏。可能用 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>
如果输入字段为空，如何显示 mdl 快餐栏验证？任何帮助，将不胜感激。谢谢。
【问题讨论】：
【参考方案1】：//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 语句中添加了 .value 属性。
[edit] 添加了一种为更多字段重用代码的方法
//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
【讨论】：
感谢您的回答。但是，不需要输入文本字段。所以如果我点击按钮，它仍然会发布表单。如果我单击按钮，小吃栏是否有任何代码，就像默认的 html 验证一样以防止发布？ 删除表单标签，修改后的代码看我的回答 哎呀，我意外交换了语句，使得当文本字段为空时，它将推送表单，现在应该修复 我从 dx_form 中删除了 action="#" & 方法，新代码仍然在未经验证的情况下发布。我添加表单邮政编码//do form post action here document.getElementById("dx_form").action = "devs.html";
您是否删除了表单标签？因为在您的代码中包含它与action="#" 的作用相同以上是关于小吃店验证 MDL - Javascript/Jquery的主要内容，如果未能解决你的问题，请参考以下文章