title: Javascript, Jquery, HTML
body: <p>How can i add prevent-default() with focus-out() in my form. I face problem when i click the reset button in my form. It show the last focusing input field error message when i click the reset button. Here my code bellow:</p>
  
  <p><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(){
      //error message section:
      $("#username_error_msg").hide();
      $("#gender_Select_error_msg").hide();
      $("#jobCategory_error_msg").hide();
      $("#experience_sector_error_msg").hide();
      $("#password_error_msg").hide();
      $("#retype_password_error_msg").hide();
      $("#email_error_msg").hide();
      $("#phone_no_error_msg").hide();
      $("#short_note_error_msg").hide();
  
      //username validation area:
      function checkUsername(){
          var name = $("#username").val();
          var usernameLength = $("#username").val().length;
          if(!name.replace(/\s/g, '').length){
              $("#username_error_msg").html("&lt;span class='errorMessage'&gt;Username shouldn't be empty..!&lt;/span&gt;").slideDown(500);
          }else if(usernameLength &lt; 5 || usernameLength &gt; 20){
              $("#username_error_msg").html("&lt;span class='errorMessage'&gt;Username should be between 5-20 characters..!&lt;/span&gt;").slideDown(500);
          }else{
              $("#username_error_msg").slideUp(500);
              return true;
          }
      }
  
      //Gender selection check:
      function checkGenderSelection(){
          var genderCategory = $('select[name=Gender]').val();
          if(genderCategory == 'Select'){
              $("#gender_Select_error_msg").html("&lt;span class='errorMessage'&gt;Please select your gender..!&lt;/span&gt;").slideDown(500);
          }else if((genderCategory == 'Male') || (genderCategory == 'Female')){
              $("#gender_Select_error_msg").slideUp(500);
              return true;
          }
      }
  
      //job category check: radiobutton
      function checkJobCategorySelection(){
          var jobCategory = $('input[name=jobCategory]:checked');
          if(jobCategory.length == 0){
              $("#jobCategory_error_msg").html("&lt;span class='errorMessage'&gt;No Category Selected..!&lt;/span&gt;").slideDown(500);
          }else{
              $("#jobCategory_error_msg").slideUp(500);
              return true;
                              //By this way we can collect the value from radio button for further action//
              //console.log("Selected Item: " + jobCategory.val());
          }
      }
  
      //programming Experience check: checkbox
      function programmingExperienceCheck(){
          var experienceList = $('input:checkbox[name=language]:checked');
          if(experienceList.length == 0){
              $("#experience_sector_error_msg").html("&lt;span class='errorMessage'&gt;No Sector Selected..!&lt;/span&gt;").slideDown(500);
          }else{
              $("#experience_sector_error_msg").slideUp(500);
              return true;
          }
      }
  
      //password validation area:
      function checkPassword(){
          var pass = $("#password").val();
          var passwordLength = $("#password").val().length;
          if(!pass.replace(/\s/g, '').length){
              $("#password_error_msg").html("&lt;span class='errorMessage'&gt;Please type your password..!&lt;/span&gt;").slideDown(500);
          }else if(passwordLength &lt; 8){
              $("#password_error_msg").html("&lt;span class='errorMessage'&gt;Password should be minimum 8 characters..!&lt;span class='errorMessage'&gt;").slideDown(500);
          }else{
              $("#password_error_msg").slideUp(500);
              return true;
          }
      }
  
      //retype password validation area:
      function checkRetypePassword(){
          var pass = $("#password").val();
          var retypePass = $("#retype_password").val();
          if(!retypePass.replace(/\s/g, '').length){
              $("#retype_password_error_msg").html("&lt;span class='errorMessage'&gt;Please give your password again..!&lt;/span&gt;").slideDown(500);
          }
          else if(pass !== retypePass){
              $("#retype_password_error_msg").html("&lt;span class='errorMessage'&gt;Password don't match..!&lt;/span&gt;").slideDown(500);
          }else{
              $("#retype_password_error_msg").slideUp(500);
              return true;
          }
      }
  
      //email validation area:
      function checkEmail(){
          var regularExp = new RegExp(/([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})/);
          if(!$("#email").val().replace(/\s/g, '').length){
              $("#email_error_msg").html("&lt;span class='errorMessage'&gt;Please give your email id..!&lt;/span&gt;").slideDown(500);
          }
          else if(regularExp.test($("#email").val())){
              $("#email_error_msg").slideUp(500);
              return true;
          }else{
              $("#email_error_msg").html("&lt;span class='errorMessage'&gt;Invalid Email..!&lt;/span&gt;").slideDown(500);
          }
      }
  
      //phone number validation area:
      function checkPhoneNumber(){
          var phone_number = $("#phoneNo").val();
          var regularExp = new RegExp(/^(?:\+?88)?01[15-9]\d{8}$/);
          if(!phone_number.replace(/\s/g, '').length){
              $("#phone_no_error_msg").html("&lt;span class='errorMessage'&gt;Please enter a phone number..!&lt;/span&gt;").slideDown(500);
          }else if(regularExp.test($("#phoneNo").val())){
              $("#phone_no_error_msg").slideUp(500);
              return true;
          }else{
              $("#phone_no_error_msg").html("&lt;span class='errorMessage'&gt;Invalid phone number..!&lt;/span&gt;").slideDown(500);
          }
      }
  
      //short notes validation area:
      function checkShortNotes(){
          var shortNotes = $("#short_note").val();
          var shortNotesLength = $("#short_note").val().length;
          if(!shortNotes.replace(/\s/g, '').length){
              $("#short_note_error_msg").html("&lt;span class='errorMessage'&gt;You have to write something about you..!&lt;/span&gt;").slideDown(500);
          }else if(shortNotesLength &lt; 10){
              $("#short_note_error_msg").html("&lt;span class='errorMessage'&gt;Your notes is too short..!&lt;/span&gt;").slideDown(500);
          }else{
              $("#short_note_error_msg").slideUp(500);
              return true;
          }
      }
  
      //username focus action:
      $("#username").focusout(function(){
          if($('input[type=reset]').data('clicked',false)){
              checkUsername();
          }
      });
  
      //gender focus action:
      $("#gender").focusout(function(){
          if($('input[type=reset]').data('clicked',false)) {
              checkGenderSelection();
          }
      });
  
      //password focus action:
      $("#password").focusout(function(){
          if($('input[type=reset]').data('clicked',false)) {
              checkPassword();
          }
      });
  
      //retypePassword focus action:
      $("#retype_password").focusout(function(){
          if($('input[type=reset]').data('clicked',false)) {
              checkRetypePassword();
          }
      });
  
      //email focus action:
      $("#email").focusout(function(){
          if($('input[type=reset]').data('clicked',false)) {
              checkEmail();
          }
      });
  
      //phone number focus action:
      $("#phoneNo").focusout(function(){
          if($('input[type=reset]').data('clicked',false)) {
              checkPhoneNumber();
          }
      });
  
      //shortNotes focus action:
      $("#short_note").focusout(function(){
          if($('input[type=reset]').data('clicked',false)) {
              checkShortNotes();
          }
      });
  
      //form submit action:
      $("#myForm").submit(function(){
  
          if(checkUsername() &amp;&amp; checkGenderSelection() &amp;&amp; checkJobCategorySelection() &amp;&amp; programmingExperienceCheck() &amp;&amp; checkPassword() &amp;&amp; checkRetypePassword() &amp;&amp; checkEmail() &amp;&amp; checkPhoneNumber() &amp;&amp; checkShortNotes()){
              return true;
          }
          else{
              return false;
          }
      });
  });
  
  //refresh button action:
  $('input[type=reset]').click(function(){
      $("#username_error_msg").hide();
      $("#gender_Select_error_msg").hide();
      $("#jobCategory_error_msg").hide();
      $("#experience_sector_error_msg").hide();
      $("#password_error_msg").hide();
      $("#retype_password_error_msg").hide();
      $("#email_error_msg").hide();
      $("#phone_no_error_msg").hide();
      $("#short_note_error_msg").hide();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.errorMessage{background-color: darkcyan;color:white; border-radius:2px;font-size: 15px;}</code></pre>
  <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;form id="myForm" action="msg.php" method="post"&gt;
                      &lt;table&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Username: &lt;/td&gt;
                              &lt;td&gt;&lt;input type="text" id="username"&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;span id="username_error_msg"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;tr&gt;
                              &lt;td&gt;Select Your Gender: &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;select name="Gender" id="gender"&gt;
                                      &lt;option value="Select"&gt;Select&lt;/option&gt;
                                      &lt;option value="Male"&gt;Male&lt;/option&gt;
                                      &lt;option value="Female"&gt;Female&lt;/option&gt;
                                  &lt;/select&gt;
                              &lt;/td&gt;
                              &lt;td&gt;&lt;span id="gender_Select_error_msg"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;tr&gt;
                              &lt;td&gt;Select Job Category: &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;input type="radio" name="jobCategory" value="Part Time"/&gt; Part Time
                                  &lt;input type="radio" name="jobCategory" value="Full Time"/&gt; Full Time
                                  &lt;input type="radio" name="jobCategory" value="Intern"/&gt; Intern
                              &lt;/td&gt;
                              &lt;td&gt;&lt;span id="jobCategory_error_msg"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;tr&gt;
                              &lt;td&gt;Select Experience Sector:&lt;/td&gt;
                              &lt;td&gt;
                                  &lt;input type="checkbox" name="language"/&gt; Javascript
                                  &lt;input type="checkbox" name="language"/&gt; PHP
                                  &lt;input type="checkbox" name="language"/&gt; Jquery
                              &lt;/td&gt;
                              &lt;td&gt;&lt;span id="experience_sector_error_msg"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;tr&gt;
                              &lt;td&gt;Password: &lt;/td&gt;
                              &lt;td&gt;&lt;input type="password" id="password"&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;span id="password_error_msg"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;tr&gt;
                              &lt;td&gt;Retype Password: &lt;/td&gt;
                              &lt;td&gt;&lt;input type="password" id="retype_password"&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;span id="retype_password_error_msg"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;tr&gt;
                              &lt;td&gt;Email: &lt;/td&gt;
                              &lt;td&gt;&lt;input type="text" id="email"&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;span id="email_error_msg"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;tr&gt;
                              &lt;td&gt;Phone No: &lt;/td&gt;
                              &lt;td&gt;&lt;input type="text" id="phoneNo"&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;span id="phone_no_error_msg"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;tr&gt;
                              &lt;td&gt;Short Note About You: &lt;/td&gt;
                              &lt;td&gt;&lt;textarea id="short_note" cols="22" rows="5"&gt;&lt;/textarea&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;span id="short_note_error_msg"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;tr&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;
                                  &lt;input type="submit" value="Submit"/&gt;
                                  &lt;input type="reset" value="Refresh"/&gt;
                              &lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>});</p>
  
  <p>How can i stop to seeing any focus-out() action when i click reset button????</p>