How to perform on-submit form validation
<p>I want to replace the after-submission checks in the form with on-the-fly completeness and correctness checks that are performed when a form field loses focus.</p>

<p>How can I do this?</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Form&lt;/title&gt;
    &lt;style&gt;
body {    
  width: 500px;
}
.part {
  width: 100%;
  padding: 5px;
  border-bottom: 1px solid #000;
}
label {
  margin-right: 5px;
}
.label-left {
  text-align: right;
}
.label-right {
  text-align: left;
}
.error {
  color: #cc0000;
}
    &lt;/style&gt;
    &lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      //$(document).ready(function() {

 function myValidateEMailAddress(email_address) {
     
     var email_pattern = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
     return email_pattern.test(email_address);
  }
  
  function checkPassword(pwd_str) {
   var my_pwd_pattern = /^(?=.*[a-zA-Z].*[a-zA-Z])(?=.*\d.*\d)[a-zA-Z0-9_]{6,20}$/;
   return my_pwd_pattern.test(pwd_str);
}
function validatePhoneNumber(phone_number) {
     
     var phone_pattern = /^(\(?\+?[0-9]*\)?)?[0-9_\- \(\)]*$/;
     return phone_pattern.test(phone_number);
  }

  $(document).ready(function() {    
    $('#form').submit(function(e) {
      var my_errors = false;
      $('.part&gt; .error').remove();
      $('#my_submission').empty();
      $(':text, :password, textarea').each(function() {
        $(this).val($.trim($(this).val()));
        if ($(this).val() == '') {
           $(this).parent().append('&lt;div class="error"&gt;Please provide a value&lt;/div&gt;');
           my_errors = true;
        }
      });
      if ($('#email').val() != '') {
         if (!myValidateEMailAddress($('#email').val())) {
            $('#email').parent().append('&lt;div class="error"&gt;Please provide a correct e-mail address&lt;/div&gt;');
            my_errors = true;
         }
      }
   if ($('#your_password').val() != '') {
         if (!checkPassword($('#your_password').val())) {
            $('#your_password').parent().append('&lt;div class="error"&gt;Please provide a correct password.&lt;/div&gt;');
            my_errors = true;
         }
      }
    if ($('#phone').val() != '') {
         if (!validatePhoneNumber($('#phone').val())) {
            $('#phone').parent().append('&lt;div class="error"&gt;Please provide a correct phone number.&lt;/div&gt;');
            my_errors = true;
         }
      }
      if ($('#addresses option:selected').val() == '') {
         $('#addresses').parent().append('&lt;div class="error"&gt;Please select one item&lt;/div&gt;');
         my_errors = true;
      }
   if ($(':radio[name="sex"]:checked').length == 0) {
         $(':radio[name="sex"]:first').parent().after('&lt;div class="error"&gt;Please select one item&lt;/div&gt;');
         my_errors = true;
      }
   if ($(':radio[name="subscription"]:checked').length == 0) {
         $(':radio[name="subscription"]:first').parent().after('&lt;div class="error"&gt;Please select one item&lt;/div&gt;');
         my_errors = true;
      }
      if ($('#likes option:selected').val() == '') {
         $('#likes').parent().append('&lt;div class="error"&gt;Please select one item&lt;/div&gt;');
         my_errors = true;
      }
      if (my_errors) {
         return false;
      }
      else {
         e.preventDefault();
         var my_submission_array = $('#form').serialize().split('&amp;');
         if (my_submission_array.length &gt; 0) {
            $('#my_submission').html('&lt;h2&gt;Submitted Elements&lt;/h2&gt;&lt;ul&gt;&lt;/ul&gt;');
            for (var i = 0; i &lt; my_submission_array.length; i++) {
                var my_pair = my_submission_array[i].split('=');
                $('#my_submission &gt; ul').append('&lt;li&gt;' + my_pair[0] + ': ' + my_pair[1] + '&lt;/li&gt;\n');
            }
         }
      }
    });
  });

     // });
    &lt;/script&gt;  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h3&gt;Output:&lt;/h3&gt;
&lt;h2&gt;My Questionnaire&lt;/h2&gt;
&lt;form name="form" id="form" action="" method="post"&gt;
 &lt;div class="part"&gt;
    &lt;label for="addresses" class="label-left"&gt;How should you be addressed?&lt;/label&gt;
    &lt;select name="addresses" id="addresses"&gt;
      &lt;option value=""&gt;Please select one&lt;/option&gt;
      &lt;option value="first"&gt;Mr.&lt;/option&gt;
      &lt;option value="second"&gt;Madam&lt;/option&gt;
      &lt;option value="third"&gt;Miss&lt;/option&gt;
      &lt;option value="fourth"&gt;Dr.&lt;/option&gt;
   &lt;option value="fifth"&gt;Pr.&lt;/option&gt;
    &lt;/select&gt;   
  &lt;/div&gt;
 
  &lt;div class="part"&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Sex:&lt;/legend&gt;
      &lt;input type="radio" name="sex" id="group1" value="1"&gt;
      &lt;label for="group1" class="label-right"&gt;Male&lt;/label&gt; 
      &lt;input type="radio" name="sex" id="group2" value="2"&gt;
      &lt;label for="group2" class="label-right"&gt;Female&lt;/label&gt;
    &lt;/fieldset&gt;
  &lt;/div&gt;
  &lt;div class="part"&gt;
    &lt;label for="last_name" class="label-left"&gt;Last Name: &lt;/label&gt;
    &lt;input type="text" name="last_name" id="last_name"&gt;
  &lt;/div&gt;
  &lt;div class="part"&gt;
    &lt;label for="first_name" class="label-left"&gt;First Name: &lt;/label&gt;
    &lt;input type="text" name="first_name" id="first_name"&gt;
  &lt;/div&gt;
  &lt;div class="part"&gt;
    &lt;label for="email" class="label-left"&gt;E-Mail: &lt;/label&gt;
    &lt;input type="text" name="email" id="email"&gt;
  &lt;/div&gt;
  &lt;div class="part"&gt; 
  &lt;label for="your_password"&gt;Password:&lt;/label&gt;
  &lt;input type="password" name="your_password" id="your_password" size="10" maxlength="20"&gt; 
 &lt;/div&gt;
 &lt;div class="part"&gt;
    &lt;label for="phone" class="label-left"&gt;Phone number: &lt;/label&gt;
    &lt;input type="text" name="phone" id="phone"&gt;
  &lt;/div&gt;
  &lt;div class="part"&gt;
    &lt;label for="likes" class="label-left"&gt;What are your likes?&lt;/label&gt;
    &lt;select name="likes" id="likes"&gt;
      &lt;option value=""&gt;Please select one&lt;/option&gt;
      &lt;option value="first"&gt;Programming&lt;/option&gt;
      &lt;option value="second"&gt; African literature&lt;/option&gt;
      &lt;option value="third"&gt;Poetry&lt;/option&gt;
      &lt;option value="four"&gt;Dancing&lt;/option&gt;
    &lt;/select&gt;   
  &lt;/div&gt;
  &lt;div class="part"&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Do you want to receive our newsletter ?&lt;/legend&gt;
      &lt;input type="radio" name="subscription" id="group1" value="1"&gt;
      &lt;label for="group1" class="label-right"&gt;Yes&lt;/label&gt; 
      &lt;input type="radio" name="letter" id="group2" value="2"&gt;
      &lt;label for="group2" class="label-right"&gt;No&lt;/label&gt;
    &lt;/fieldset&gt;
  &lt;/div&gt;
  &lt;div class="part"&gt;
    &lt;label for="comments" class="label-left"&gt;Write some comments below:&lt;/label&gt;
    &lt;textarea name="comments" id="comments" cols="40" rows="3"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div class="part"&gt;
    &lt;input type="submit" name="submit" id="submit" value="Submit Form"&gt;
  &lt;/div&gt;
  &lt;div id="my_submission"&gt;&lt;/div&gt;
&lt;/form&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>