Request.JSON V2

sending a JSON request to the jsFiddle backend. Later on parse and display the data.

by amutsa

HTML

<h2>Add a User:</h2>
<form id="user-add" method="post">

  <input id="name" type="text" name="username" placeholder="name" required="required" />
  
  <input id="email" type="email" name="email" placeholder="please enter your email address" required="required" pattern="[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" />
  
  <button id="user-submit" type="submit">add user</button>

</form>

<h2>Users:</h2>

<ul id="users"></ul>

CSS

/* Your CSS Here */

/* To highlight the input box if its invald */

input:invalid {
  border: 2px dashed #FF0000;
  ;
}

input:valid {
  border: 2px solid black;
}

error {
  color: #FF0000;
}
table, td {
    border: 1px solid black;
}

JavaScript

/*
 * ASSIGNMENT:

 * HTML: 
   - Complete the HTML to have semantic and compliant markup.
   - Format the code for readability

 * JAVASCRIPT: 
   - Dynamically add a user to the users list using the existing addUser function 
   - Submit the form with an attached event listener on the button
   - Highlight the email input with red when a user enters an invalid email address
   - Display following error message: "please enter a valid email address" in red when a user enters an invalid email address
   - If the ajax request returns an error, display the error message in red.
   - If the ajax request returns success, display the newly added user in the users list
   - DO NOT use any libraries e.g. bootstrap, jquery, etc

 * BONUS POINTS:
   - add some CSS3 properties(e.g. animation/effects)
   - add additional functionality (e.g. removing a user)
   - explain or propose any improvements as comments
 */

/*

*/
// ===================== START YOUR CODE HERE =====================
/*
when you click on the name and email for the first time it prompt for validity. just click okay.
add user may or may not give you a promt twice, but click add user should work. thanks
*/

//an attached event listener on the button
document.getElementById("user-add").addEventListener("click", function(event) {
  var userName = document.getElementById('name'),
    userEmail = document.getElementById('email');
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }

  // checking for validation name and email
  if (!userName.checkValidity()) {
    alert('please enter a valid name');
    return false;
  }
  if (!userEmail.checkValidity()) {
    alert('please enter a valid email address');
    return false;
  }
  // call to addUser function with a table
  var userList = document.getElementById('users');
  addUser(userName.value, userEmail.value, function(response) {
    if (response.success) {
      var newUser = document.createElement('li');
   ...