omdx omdx - 16 days ago 7
HTML Question

snackbar validation MDL - Javascript/Jquery

I want to show snackbar if input field is empty. maybe replace default html5 required validation with Snackbar/Toast.
Here my code:

<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>


How to display mdl snackbar validation if inputfield is empty? any help would be appreciated. thx.

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

function validate() {
    if(document.getElementById('no_mohon') == "" || document.getElementById('no_mohon') == null) {
        //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
    }
}