title: Dynamically modify output alert content on submit form with jQuery
body: <p>I currently have a page that contains a form and a hidden validation div thats being used for alert:</p>
  
  <pre><code>&lt;body&gt;
     &lt;form id="1"&gt;
         &lt;input id="2"&gt;
         &lt;button id="submitButton" type="button"&gt;Submit&lt;/button&gt;
     &lt;/form&gt;
  
  
     &lt;div id="alert"&gt;
         &lt;span&gt;Input is empty!&lt;/span&gt;
     &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>On page load, the alert div is hidden with CSS:</p>
  
  <pre><code>#alert{
      display: none;
  }
  </code></pre>
  
  <p>There is a JS validation file that is being used to check if input  is empty on submit. This JS file cannot be changed.</p>
  
  <p>If the input tag is empty when click submit button, the JS will perform a simple jQuery <code>show()</code> function so the div will be visible to the user:</p>
  
  <pre><code>if(isEmptyField){
    $('#alert').show();
  }
  </code></pre>
  
  <p>Now, I cannot modify the "Input is empty!" string that exist in the span tag, however, I want to change the alert message to "Empty input!".</p>
  
  <p>How do I create a jQuery event to achieve this? So when I click the Submit button, I will see "Empty input!" instead of "Input is empty!"?</p>