You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »

You can customize your own with the use of Custom HTML to add Javascript based front-end validation in a form. Below is an example on how:

  1. Set the selected field to Mandatory by adding the default validator.
  2. Drag and drop a Custom HTML and code the following:
<script>
$(document).ready( function(){
    
      $("form").submit(function(event) {
          
		  var isValid = true;
		  var radioValue;
		  $(".form-cell-validator:visible:contains('*')").each(function(){
		      
				// check radio buttons
				$(this).parents(".form-cell").find("input:radio").each(function(){		
				    $(this).parents(".form-cell").css("background-color","");
					var input = $(this).parents(".form-cell").find("input:radio").attr("name");
					radioValue = $("input[name='"+input+"']:checked");
					if(radioValue){
						if(!radioValue.val()){
                            $(this).parents(".form-cell").css("background-color","#f8d7da");
						   isValid = false;
						   return false;
						}
					}
				});
				
				//check textarea
                $(this).parents(".form-cell").find("textarea").each(function(){	
				    //$(this).parents(".form-cell").css("background-color","");
        	        var textarea = $(this).parents(".form-cell").find("textarea").attr("name");
                    var textareaValue = $(this).parents(".form-cell").find("textarea").val();
                        
                        if(!textareaValue){
                            $(this).parents(".form-cell").css("background-color","#f8d7da");
						   isValid = false;
						   return false;
                        }
        	    });
        	    
        	    
                //check select buttons
                 $(this).parents(".form-cell").find("select").each(function(){		
				    //$(this).parents(".form-cell").css("background-color","");
         	        var select = $(this).parents(".form-cell").find("select").attr("name");
                    if (!(typeof select === "undefined")) {
                        var selectValue = $('select[id^='+select+']').find(":selected").text();
                        
                        if(!selectValue){
                            $(this).parents(".form-cell").css("background-color","#f8d7da");
    						   isValid = false;
    						   return false;
                        }
                    }
         	    });
         	    
		  });
        
        //if invalidated, remove blockui
        if(!isValid){
            $('#myErrorMsg').fadeIn('fast').delay(1000).fadeOut('fast');            
                $.unblockUI(); 
            return false;
            
        }else{
            return true;
        }
    return true;
    });
    
})
</script>

<div id="myErrorMsg" class="alert alert-error" role="alert">
  Validation Error : Missing Required Value
</div>

#myErrorMsg{
    display:none;
}
</style>
  • No labels