title: Getting redirected to another webpage on page load with the contents of my JavaScript array as the URL
body: <p>I am doing a small exercise using HTML and Javascript. Basically, I have 2 input fields that I need to validate using 1 function in Javascript. 
  The first input asks for the name and if the name is less than 3 characters, there would be an error printed, else, the error is removed. 
  The second one asks for the locality. Now, to validate this, I must first create an array which contains about 3 locations and then compare the location the user entered to see if it is in the array. If it is not, again, an error is printed. The thing is this; I am getting an error on live preview. 
  The error prints "Cannot GET /Msida,Pieta,Marsa" on screen and "Failed to load resource: the server responded with a status of 404 (Not Found)" on the console. What could the problem be?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Revision&lt;/title&gt;
  &lt;/head&gt;
  
      &lt;body&gt;
          &lt;nav id="menu"&gt;&lt;/nav&gt;
          &lt;a&gt;Full Name: &lt;/a&gt;&lt;input type="text" name="fName" id="fName" &gt;&lt;br/&gt;
          &lt;div id="divName"&gt;&lt;/div&gt;&lt;br/&gt;
          &lt;a&gt;Locality: &lt;/a&gt;&lt;input type="text" name="locality" id="locality" &gt;&lt;br/&gt;
          &lt;div id="divLocality"&gt;&lt;/div&gt;&lt;br/&gt;
          &lt;script src="js/mainScript.js"&gt;&lt;/script&gt; 
          &lt;script src="js/detailsScript.js"&gt;&lt;/script&gt; 
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript: </p>
  
  <pre><code>var fName = document.getElementById("fName");
  var locality = document.getElementById("locality");
  var divName = document.getElementById("divName");
  var divLocality = document.getElementById("divLocality");
  var location = ["Msida", "Pieta", "Marsa"];
  
  
  function validation()
  {
  if(this.name == "fName")
      {
          if(this.value.length &lt; 3)
              {
                  divName.innerHTML = "Name should have atleast 3 characters";
                  divName.style.color = "red";
              }
          else if(this.value.length &gt;= 3)
              {
                  divName.innerHTML = "";
              }
      }
  else if(this.name == "locality")
      {
          if(location.indexOf(this.value) &gt; -1)
          {
              divLocality.innerHTML = "Location Exists";
              divLocality.style.color = "red";
          }
          else
          {
              divLocality.innerHTML = "Location doesn't Exist";
              divLocality.style.color = "red";
          }
      }
  
  }
  
  fName.addEventListener('focusout', validation);
  locality.addEventListener('focusout', validation);
  </code></pre>
  
  <p>Thanks!</p>