Validate Field with Avascript

Question

I need to validate some field, forcing the user to provide the data before saving in database, if it does not provide the data, the edge of the control turns red stating that there is something wrong with the field.

I have already been able to validate by javascript in the onBlur event for the field to turn red, more when I save the save button of a post on the page and the fields that were with the red border loses the color.

You can call javascript for each page post, to validate the fields?

the javascript code

function ValidatxtECFNrSerie(controle) {

                if (controle == '') {
                    $('#' + '<%= txtECFNrSerie.ClientID %>').addClass('validationError'); 
                }
                else {
                    $('#' + '<%= txtECFNrSerie.ClientID %>').removeClass('validationError');
                }

        }`

     <asp:Label ID="lblNrSerieECF" Text="Nr. Série ECF/SAT:" runat="server" />
           </div>
                <div class="dataForm">
                        <asp:TextBox ID="txtECFNrSerie" runat="server" MaxLength="15" Width="150px" onBlur="javascript:ValidatxtECFNrSerie(this.value)"></asp:TextBox>
           </div> 

Answer 1

There’s a dirty way to do it:

<% if(Request.IsPostBack){ %>
jQuery(function() {
      ['<%= txtECFNrSerie.ClientID %>', '<%= Outro1.ClientID %>', '<%= OutroEAssimPorDiante.ClientID %>'].forEach(function(id) {
          ValidatxtECFNrSerie($(id).val();
          });
      });
<% } %>

Answer 2

I managed an extension in jQuery, whether it helps.

• Note that both on Blur as in the Submit it validates the fields

var validForm = false;

(function (jQuery){
	jQuery.fn.validate = function(callbackCheck, callbackError){
	
		var focus = false;
		var pass = true;

		var classError = 'error-input';

		jQuery(this).each(function(){
			var value = jQuery(this).val();
			if(value == '' || (typeof(callbackCheck) == 'function' && callbackCheck(this))){
				jQuery(this).addClass(classError);
				pass = false;
				
				if(!focus){
					jQuery(this).focus();
					focus = true;
				}

				if(typeof(callbackError) == 'function'){
					callbackError(this);
				}
			}else{
				jQuery(this).removeClass(classError);
			}
		});
		
		validForm = pass;
		
		return this;
	};
})(jQuery);

function formValidate(_this){
	jQuery(_this).find('input[type!="submit"],select').validate();
}

function inputValidate(_this){
	jQuery(_this).validate();	
}

.error-input{
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form onSubmit="formValidate(this)" action="javascript:void(0);" method="post">
  <input type="texte" onBlur="inputValidate(this)"/>
  <input type="texte" onBlur="inputValidate(this)"/>
  <input type="submit"/>
</form>