added error message for input

css/workspace.css

@@ -8,6 +8,10 @@
 	float:right;
 }
 
+#errUserName {
+	color: red;
+	
+}
 div.verification, div.details, div.success {
 	height:100px; 
 	background:lightgrey; 

html/workspace.html

@@ -2,6 +2,7 @@
 
 <input id="username" type=text name="user" placeholder="input name">
 <button id="step1"> next </button>
+<div id="errUserName"> abcdefg </div>
 <div class="verification"> 
 verification 
 </div>

js/workspace.js

@@ -24,14 +24,30 @@
     	console.log(mm);
     });
     
+    function errUserName(msg)
+    {
+    	var el = $("#errUserName");
+    	el.html(msg);
+    	el.fadeIn();
+    	setTimeout(function(){
+    		el.fadeOut();
+    	}, 2000);
+    }
+    
     
     $(document).on("click", "#step1", function(){
+    	var input = $("#username").val();
+    	if ( input == "" ){
+    		errUserName(" cannot be empty");
+    		return;
+    	}
+    	
         $.post(mm.ajax_url, { // POST request
             _ajax_nonce: mm.nonce, // nonce
             action: "list_users", // action
-            client : 333,
+            client : input,
         }, function(response,  status, xhr){
-        	alert(response);	
+        	alert(response.id);	
         }).fail(function(){
         	alert('network error ');
         });

member.php

@@ -96,11 +96,17 @@ class Member{
     
     function ajax_list_users()
     {
+        check_ajax_referer('medal');
+        $client = $_POST['client'];
+        $url = $_POST["action"];
+        
         $response = array(
           'status' => 'success',
            'users' => [
             1,2,3,4,5,6,7
             ],
+           'id' => $client,
+            'url' => $url,
         );
         wp_send_json($response);
     }