title: Validating input fields in modal
body: <p>I want to validate my first name and last name input fields in a modal. If it's empty, it will span a message "The field is required!" colored in red.</p>
  
  <p><strong>The problem I am facing is my script isn't validating the fields.</strong></p>
  
  <p>Please help.
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
      $('#btn').click(function(e) {
          var fieldIDArray = [$('#firstName', '#lastName')];
          var spanIDArray = [$('#firstNameRequired',
              '#lastNameRequired')];
          for (i = 0; i &lt; fieldIDArray.length; i++) {
              if (!fieldIDArray[i].val()) {
                  e.preventDefault();
                  fieldIDArray[i].closest('.form-group')
                      .removeClass('has-success').addClass(
                          'has-error');
                  spanIDArray[i].show();
              } else {
                  fieldIDArray[i].closest('.form-group')
                      .removeClass('has-error').addClass(
                          'has-success');
                  spanIDArray[i].hide();
              }
          }
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.requiredField {
      color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
         &lt;head&gt;
            &lt;title&gt;Modal FOrm&lt;/title&gt;
            &lt;meta charset="utf-8"&gt;
            &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
            &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
            &lt;script
               src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
            &lt;script
               src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
             &lt;script src="js/form-validation.js"&gt;&lt;/script&gt;
            &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
         &lt;/head&gt;
         &lt;body&gt;
  
              &lt;!DOCTYPE html&gt;
          &lt;html&gt;
          &lt;head&gt;
          &lt;title&gt;J2EE&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="../../js/applicantFormValidation.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" type="text/css" href="../../css/style.css"&gt;
          &lt;/head&gt;
          &lt;body&gt;
              &lt;a href="# " data-toggle="modal"
                              data-target="#RegFormModal" class="underline inputLabel"&gt;
                                  Open Form Modal&lt;/a&gt;
              &lt;div class="container"&gt;
                  &lt;!-- Modal --&gt;
                  &lt;div class="modal fade" id="RegFormModal" tabindex="-1" role="dialog"
                      aria-labelledby="myModalLabel" aria-hidden="true"&gt;
                      &lt;div class="modal-dialog"&gt;
                          &lt;div class="modal-content"&gt;
                              &lt;!-- Modal Header --&gt;
                              &lt;div class="modal-header"&gt;
                                  &lt;button type="button" class="close" data-dismiss= modal&gt;
                                      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt; &lt;span class="sr-only "&gt;Close&lt;/span&gt;
                                  &lt;/button&gt;
                                  &lt;h4 class="modal-title" id="myModalLabel "&gt;My Modal&lt;/h4&gt;
                              &lt;/div&gt;
                              &lt;!-- Modal Body --&gt;
                              &lt;div class="modal-body "&gt;      
                                  &lt;form id="applicationForm" name="applicationForm" role="form"&gt;
                                      &lt;!--action="ApplicationFormCheck" method="POST"&gt; --&gt;
                                      &lt;div class="form-group row"&gt;
                                          &lt;label for="firstName" class="col-md-2"&gt;First Name&lt;/label&gt;
                                          &lt;div class="col-md-4"&gt;
                                              &lt;input type="text" class="form-control" id="firstName"
                                                  placeholder="Enter First Name" name="firstName" /&gt; 
                                          &lt;/div&gt;
                                          &lt;div class="col-md-4"&gt;
                                              &lt;span class="requiredField" id="firstNameRequired" style="display:none;"&gt;This field is Required!&lt;/span&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;  
                                      &lt;div class="form-group row"&gt;
                                          &lt;label for="lastName" class="col-md-2"&gt;First Name&lt;/label&gt;
                                          &lt;div class="col-md-4"&gt;
                                              &lt;input type="text" class="form-control" id="lastName"
                                                  placeholder="Enter Last Name" name="lastName" /&gt; 
                                          &lt;/div&gt;
                                          &lt;div class="col-md-4"&gt;
                                              &lt;span class="requiredField" id="lastNameRequired" style="display:none;"&gt;This field is Required!&lt;/span&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;  
                                      &lt;div style="text-align: center;"&gt;
                                          &lt;button id="btn" type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
                                      &lt;/div&gt;
                                  &lt;/form&gt;       
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/body&gt;
          &lt;/html&gt;
         &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>