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

Compare with Current View Page History

Version 1 Next »

As Joget does not have any front-end validation in its form, you can customize your own with the use of Custom HTML.

  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>
  • No labels