Q:

How to display notification alert popup after clicked on submit?

I am using notification alert popup plugin (http://www.jqueryscript.net/demo/Sliding-Growl-Notification-Plugin-For-jQuery-jsnotify/)
I have to display notification alert after clicked on submit button if there are some error in the text field. My below code, It is displaying an alert when I clicked inside the text field and continuously displaying when clicked.And how can I use for an alert for the second text field? Would you help me in this?

  $('#myDiv').click(function(){
  var options1 = {
  'title': 'Error',
  'style': 'error',
  'message': 'Invalid name',
  'icon': 'warning',
  };
  var n1 = new notify(options1);
  n1.show();
  });
  body { background-color:#f7f7f7; font-family:'Roboto';}
  .container { margin:70px auto;}
  <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>

A:

You are using that plugin in wrong manner. You are calling click event on div which was registering click event on div container. So, even if you click insider that container (not on inputs and button) it is showing pop up.
I've put everything in $(document).ready() and calling pop up when you have non-empty filed on form submission. You can replicas same for second input field.
Working example - http://jsbin.com/watacirasu/edit?html,js,output

