3

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.

omdx
  • 53
  • 7

1 Answers1

2
//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
    }
}

[edit] added .value property to if statement.

[edit] added a way to reuse code for more fields

//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
    }
}
Grey
  • 877
  • 9
  • 29
  • thx for the answer. but, input textfield is not required. so if i click the button, its still post the form. is there any code if i click the button, snackbar just like default html validation to prevent from post? – omdx Nov 21 '16 at 12:21
  • delete the form tags, look at my answer for the edited code – Grey Nov 21 '16 at 12:40
  • oops, I swapped the statements on accident, making that, when the textfield is empty, it would be pushing the form, should be fixed now – Grey Nov 21 '16 at 12:50
  • I delete action="#" & method from dx_form, new code still post without being validated. I add form post code `//do form post action here document.getElementById("dx_form").action = "devs.html";` – omdx Nov 21 '16 at 13:16
  • did you delete the form tag? as having this in your code will do the same as `action="#"` – Grey Nov 21 '16 at 13:21
  • here is my edit on the code pen: http://codepen.io/GreyDevision/pen/NbppzO – Grey Nov 21 '16 at 13:24
  • now I deleted form tag. please look at codepen sir (http://codepen.io/dxacaniest/pen/ZBeexg). dunno where I'm wrong... – omdx Nov 21 '16 at 13:25
  • please take a look at my answer again, I made a few mistakes myself, should work now, with the form tag deleted, and since the form tag doesn't exist anymore, you can not use that `document.getElementById("dx_form").action = "devs.html";` you can send the needed data over with an AJAX request in the `else` part of the function, or just process it in there – Grey Nov 21 '16 at 13:28
  • yup sorry for my bad. can I use just like (http://stackoverflow.com/a/16894623/6436414), to fetch/get data from mysqli? – omdx Nov 21 '16 at 13:34
  • or maybe from this example? (http://stackoverflow.com/questions/22643644/get-data-from-mysql-database-using-php-and-jquery-ajax) – omdx Nov 21 '16 at 13:36
  • yep, that's a way to post the data to your database, and get it, because you just send a request to a php page that gets the data for you and sends something back if it needs to. – Grey Nov 21 '16 at 13:37
  • ajax is pretty nifty to know, though there are Node.js dependencies that could help you (I suggest looking into MongoDB and Angular2 if you want to go js only) – Grey Nov 21 '16 at 13:38
  • I just realised that, instead of calling the function on the button itself, you could put it in your form tag like so: `
    `, this is actually a bit better, but not neccecary.
     – Grey Nov 21 '16 at 13:40
  • sir, I need your assistan here to call form post action. I use this code `//do form post action here var no_mohon = $("#no_mohon").val(); var data = "no_mohon-" + query; $.ajax({ method: "post", url: "s_ktp.php", data: data, success: funtion(data){ $("search_error").html(data); } })` and give me error "Uncaught SyntaxError: Unexpected token". – omdx Nov 23 '16 at 03:52
  • you should ask a new question for this – Grey Nov 23 '16 at 07:29
  • yeah... I already ask new question here (http://stackoverflow.com/questions/40758029/jquery-ajax-search-always-null-by-submit-button). – omdx Nov 23 '16 at 09:36
  • Sir, how to use it with elseif. Say if I had another id `namapemohon` – omdx Dec 13 '16 at 05:25
  • you could pass the id as a variable, I'll edit my answer appropiatly – Grey Dec 13 '16 at 07:26
  • [pastebin.com/Afg8BbTk](http://pastebin.com/Afg8BbTk) I think its work. But now I got error to apply it with pattern check. I add `document.getElementById('namapemohon').pattern = "[A-Za-z .'-]+"` (see code) but not working to display snackbar – omdx Dec 13 '16 at 07:42
  • currently at work, can't go on pastebin, could you post somewhere else? also, `.pattern` is kinda unrelated to this question, you might want to make a new one – Grey Dec 13 '16 at 07:55
  • [Stack](http://stackoverflow.com/questions/41122090/ajax-jequery-post-without-form-tag-without-refresh) thats my new question bout Snacbar Validation - Post Data via Ajax Jquery - Without Form Element - Whitout Refreshing Page. Please help me sir... – omdx Dec 13 '16 at 13:17