<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="simplejax.js"></script>
<script type="text/javascript">
function setError(id, contextual)
{
   // Check error isn't set
   if(eval(getObj(id + '_error')))
      return false;

   var ourNode = getObj(id);
   
   //Highlight field red
   ourNode.style.border = '1px solid #F00';
   
   //Create new div
   var newNode = document.createElement('div');
   newNode.setAttribute('class', 'error');
   newNode.setAttribute('id', id + '_error');
   
   //Create new text node
   var text = document.createTextNode(contextual);
   newNode.appendChild(text);
   
   ourNode.parentNode.insertBefore(newNode, ourNode.previousSibling);
   
}
   
function updateForm(object)
{
   for(var i = 0; i <= object.length-1; i++)
   {
      setError(object[i].id, object[i].text);
   }
}

function getObj(id)
{
   return document.getElementById(id);
}

function submitForm()
{
   // See the string [Only in example]
   var exampleTxt = 'The result you are about to witness is static and received from a JSON text file, no actual processing has been done, so please expect the errors to bear no contextual reference to the submitted values.';
   alert(exampleTxt);
   simplejax.set('FORM', 'addUser');

   //Invoke simplejax object
   simplejax.invoke();
}

simplejax = new simplejax('checked.json', updateForm);
simplejax.set('JSON', true);
</script>
</head>
<body>
<form id="addUser" action="" method="post">
   <h2>Add a new user</h2>
   <label for="name">Name:</label><input type="text" name="name" id="name" /><br />
   <label for="email">Email:</label><input type="text" name="email" id="email" /><br />
   <label for="age">Age:</label><input type="text" name="age" id="age" /><br />
   <label for="password">Password:</label><input type="password" name="password" id="password" /><br />
   <label for="passwordv">Password verify:</label><input type="password" name="passwordv" id="passwordv" /><br />
   <br />
   <input type="button" value="Add user" onclick="submitForm()" />
</form>
</body>
</html>