Question

我正在使用通知提醒弹出插件（http://www.jqueryscript.net/demo/Sliding-Growl-Notification-Plugin-For-jQuery-jsnotify/）

如果文本字段中有错误，我必须在点击提交按钮后显示通知提醒。我的下面的代码，当我在文本字段内单击并在单击时连续显示时显示警报。我如何使用第二个文本字段的警报？你能帮帮我吗？

＆＃13;

  $('#myDiv').click(function(){
  var options1 = {
  'title': 'Error',
  'style': 'error',
  'message': 'Invalid name',
  'icon': 'warning',
  };
  var n1 = new notify(options1);
  n1.show();
  });

＆＃13;

  body { background-color:#f7f7f7; font-family:'Roboto';}
  .container { margin:70px auto;}

＆＃13;

  <script src="http://www.jqueryscript.net/demo/Sliding-Growl-Notification-Plugin-For-jQuery-jsnotify/dist/js/notify.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <link href="http://www.jqueryscript.net/demo/Sliding-Growl-Notification-Plugin-For-jQuery-jsnotify/dist/css/notify.css" rel="stylesheet"/>
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
  
  
  <form action="" method="post" id="myDiv">
  <input type="text" name="name" id="n1">
  <input type="text" name="mobile" id="n2">
  <input type="submit" name="submit" value="click me">
  </form>

＆＃13;

Answer 1

您可以在提交活动中查看表格，如下所示

＆＃13;

$('#myDiv').submit(function(){

var firstinput = $("#n1").val();
var secinput = $("#n2").val();
 
  if(firstinput == "")
  {
  var options = {
  'title': 'Error',
  'style': 'error',
  'message': 'Invalid Name',
  'icon': 'warning',
  };
   var n1 = new notify(options);
   n1.show();
  }
  else if (secinput == "")
  {
   var options = {
  'title': 'Error',
  'style': 'error',
  'message': 'Invalid Mobile',
  'icon': 'warning',
  };
  var n2 = new notify(options);
  n2.show();
  }
  else { 
    console.log('form submitted');
    }
  });

＆＃13;

body { background-color:#f7f7f7; font-family:'Roboto';}
  .container { margin:70px auto;}

＆＃13;

<script src="http://www.jqueryscript.net/demo/Sliding-Growl-Notification-Plugin-For-jQuery-jsnotify/dist/js/notify.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <link href="http://www.jqueryscript.net/demo/Sliding-Growl-Notification-Plugin-For-jQuery-jsnotify/dist/css/notify.css" rel="stylesheet"/>
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
  
  
  <form action="" method="post" id="myDiv">
  <input type="text" name="name" id="n1">
  <input type="text" name="mobile" id="n2">
  <input type="submit" name="submit" value="click me">
  </form>

＆＃13;

Answer 2

您正在以错误的方式使用该插件。您正在click上调用div活动，该活动正在click容器上注册div个活动。因此，即使您单击内部容器（而不是输入和按钮），它也会显示弹出窗口。

我已将所有内容放入$(document).ready()并在form提交时提交非空文件时弹出。您可以为第二个输入字段复制相同的内容。

工作示例 - http://jsbin.com/watacirasu/edit?html,js,output

单击提交后如何显示通知警告弹出窗口？

2 个答案:

您可以在提交活动中查看表格，如下所示