title: Keep updating error message when validating multiple input fields
body: <p>I have a form that I am validating server side and adding style (red border) to make clear which fields are invalid using jQuery. At the bottom there also is a message which indicates why it is invalid.</p>
  
  <p>The borders work fine, but the problem is the message at the bottom. When for example some fields are invalid and I fix them, the last error message is still always displayed. </p>
  
  <p>This is because an if statement in the following code:</p>
  
  <pre><code>$("body").on("blur","input",function(e){
      e.preventDefault();
      accountform = $(".account-form").serialize();
      $.ajax({
       type:'post',
       url:"includes/updateaccount.php",
       data:({accountform: accountform}),
       success:function(data){
           var obj = JSON.parse(data);
  
           for (var i = 0; i &lt; obj.length; i++) {
               var status = obj[i].status;
               var field = obj[i].field;
               if(status == 'error'){
                   var message = obj[i].message;
                      $( "#updateresult" ).show().empty().append( message );
                      $( 'input[name="' + field + '"]' ).addClass('invalid-input');
               }else if(status == 'success'){
                   $( 'input[name="' + field + '"]' ).removeClass('invalid-input');
               }
           }
       }
   });
  });
  </code></pre>
  
  <p>This code: </p>
  
  <pre><code>if(status == 'error'){
      var message = obj[i].message;
      $( "#updateresult" ).show().empty().append( message );
      $( 'input[name="' + field + '"]' ).addClass('invalid-input');
  }else if(status == 'success'){
      $( 'input[name="' + field + '"]' ).removeClass('invalid-input');
  }
  </code></pre>
  
  <p>Does not remove the message when all is okay. This is because if one input field has status <code>success</code> there will be no error message at all. </p>
  
  <p>I tried this : </p>
  
  <pre><code>if(status == 'error'){
      var message = obj[i].message;
      $( "#updateresult" ).show().empty().append( message );
      $( 'input[name="' + field + '"]' ).addClass('invalid-input');
  }else if(status == 'success'){
      $( 'input[name="' + field + '"]' ).removeClass('invalid-input');
      $( "#updateresult" ).hide();
  }
  </code></pre>
  
  <p>But like I said, this removes the error message because it never reaches the <code>error</code> status if one input field has status <code>success</code>.</p>
  
  <p>This is an example of the JSON I am receiving:</p>
  
  <pre><code>[ 
      { 
      "status":"error",
      "field":"voornaam",
      "message":"Vul een voornaam in"
      },
      { 
      "status":"success",
      "field":"achternaam"
      },
      { 
      "status":"error",
      "field":"telefoon",
      "message":"Vul een telefoonnummer in"
      },
      { 
      "status":"success",
      "field":"email"
      },
      { 
      "status":"success",
      "field":"huisnummer"
      },
      { 
      "status":"success",
      "field":"postcode"
      },
      { 
      "status":"success",
      "field":"straat"
      },
      { 
      "status":"success",
      "field":"woonplaats"
      }
  ]
  </code></pre>