snackbarのバリデーションMDL - Javascript/Jquery

入力フィールドが空であればsnackbarを表示したい。スナックバー/トーストでデフォルトのhtml5検証が必要な場合は、代わりに置き換えてください。ここに私のコード：入力フィールドが空の場合、MDLスナックバーの検証を表示する方法snackbarのバリデーションMDL - Javascript/Jquery

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

？どんな助けもありがとう。どうも。

出典

2016-11-21 omdx

//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プロパティを追加しました。

[編集]複数のフィールド

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

出典

2016-11-21 11:43:45 Grey

答えのためのTHXのためのコードを再利用する方法を追加しました。しかし、入力テキストフィールドは必要ありません。ボタンをクリックすると、まだフォームがポストされています。ボタンをクリックするとコードがありますか？snackbarは既定のhtml検証と同様に投稿からの保護をしますか？ – omdx

フォームのタグを削除し、編集したコードの回答を見て – Grey

oops、私は事故でステートメントを入れ替えました。テキストフィールドが空のときにフォームを押しているので、今修正する必要があります – Grey

snackbarのバリデーションMDL - Javascript/Jquery

答えて

関連する問題