title: html form validation using external javascript
body: <p>Friends,</p>
  
  <p>I am trying to validate my html form using an external javascript but I am getting an error. Here are the code details:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Contact US&lt;/title&gt;
          &lt;link href="StyleSheet.css" rel="Stylesheet" type="text/css" /&gt;
          &lt;script type = "text/javascript" src = "JavaScript.js"&gt; &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;h1&gt;Contact Us&lt;/h1&gt;
      &lt;form id = "contactUs" action="Index.htm"  onsubmit = "return validateFirstName()"&gt;
      &lt;div class="row"&gt;
                  &lt;span class = "label" &gt;First Name:&lt;/span&gt;
                  &lt;span class = "formw"&gt;&lt;input type="text" name = "fname"/&gt; &lt;/span&gt;
       &lt;span class = "formw"&gt;&lt;input type="submit"  name = "btnSubmit" value = "Submit" /&gt; &lt;/span&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My external javascript file "JavaScript.js" contains the following code:</p>
  
  <pre><code>  function validateFirstName() {
          var x = document.forms["contactUs"]["fname"].value;
          if (x == null || x == "") {
              alert("First name cannot be left blank.");
              return false;
          }
          else {
              return true;
          }
  </code></pre>
  
  <p>but when I clicked the Submit button then I get the following error:</p>
  
  <p>Line: 19
  Error: 'validateFirstName' is undefined</p>
  
  <p>Thank You for your help in advance.</p>