How to prevent validation errors from being displayed

I have a registration form which uses 2 dependent list boxes Country and State, where State is populated basing on the Country selection.

To dynamically load the State list box I had to add a client OnChange event to the Country list box, which submits the form. But at this point the form displays all errors (mainly missing fields) and I don't want this to happen.

This is the solution I found, based mainly on client side JavaScript:

The name of my form is RegisteredUser

1. I have added a hidden field to the form, with name
   Validation
   , Control Source Type = "Code Expression", type Boolean and default value = True
2. I've added a client OnChange event to the Country list box, with the following code:
   
   document.forms["RegisteredUser"].Validation.value = "No";
   document.forms["RegisteredUser"].submit();
3. In the HTML code, I've located the {Errors} row, and set the id and name attributes to phErrors - it should look like:
   <!-- BEGIN Error -->
   <tr class="Error" id="phErrors" name="phErrors">
     <td colspan="2">{Error}</td>
   </tr>
   <!-- END Error -->
4. I've added a client OnLoad event to the form, with the following code:
   
   var phErrors = document.getElementById ("phErrors");
   
   if (phErrors != null)
   {
     if (document.forms["RegisteredUser"].Validation.value == "No")
     {
       document.forms["RegisteredUser"].Validation.value = "Yes";
       phErrors.style.visibility = "hidden";
       phErrors.style.position = "absolute";
     }
     else
     {
       phErrors.style.visibility = "visible";
       phErrors.style.position = "relative";
     }
   }
   

This code reads the value of the Validation hidden field: if the value is No, the phErrors row is hidden, otherwise it is shown.

It seems to work correctly, and also it shouldn't add the row to the database, because the validation occurs at server side, but it isn't displayed at client side (although included in the HTML).