Hi Sitthanat,

Here, Please find the code below. 

I have updated the code with a JS function which will remove the error message once the value entered in text box.

Extra lines added. 

<script> function validatefloatinput(event){   let elm = event.target;   $(elm).siblings('.errortext').empty();   $(elm).siblings('.errorwrapper').empty();    }

</script>

Input element modified with a onchange event. and error message tag updated with a class. 

<input  class="floating-input" placeholder="  " <pega:include name="ClientValidation"/> type="text"                                  size="<pega:reference name="$save(strExpectedSize)" />"                                 name="<pega:reference name="$this-name" />"                                  id="<pega:reference name="$THIS-DEFINITION(pyPropertyName)" /><%= StringUtils.crossScriptingFilter(tools.getParamValue("pega_RLindex")) %>"                                  value="<pega:reference name="$save(formattedNumber)" />"                  onchange="javascript:validatefloatinput(event)"                  />                                       <span class="highlight"></span>                   <label class="float-label"><%=tools.getParamValue("Label") %></label>                   <small style="color:red;" class= "errortext <% if(messageOnPropAfter.length()>0){  %> error <% } %> " > <%= messageOnPropAfter %></small>

Full code below.

<style>
  
/****  floating-Lable style start ****/
  
  small.errorwrapper{
        float: right;
    position: absolute;
    right: 25px;
    top: 6px;
  }
  small.errorwrapper .iconErrorDiv {
    margin-left :0px !important;
  }
  
.floating-label { 
  position:relative; 
  margin-bottom:20px; 
  margin-top:20px !important;
}
.floating-input , .floating-select {
  font-size:14px;
  padding:4px 4px !important;
  display:block;
  width:100%;
  height:30px;
  background-color: transparent !important;
  border:none !important;
  border-bottom:1px solid #757575 !important;
  
}

.floating-input:focus , .floating-select:focus {
     outline:none !important;
     border-bottom:2px solid #5264AE !important; 
}

label.float-label {
  color:#999 !important; 
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:5px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

.floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label {
  top:-18px;
  font-size:14px;
  color:#5264AE !important;
}

.floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label {
  top:-18px;
  font-size:14px;
  color:#5264AE;
}

/* active state */
.floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {
  width:50%;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.floating-textarea {
   min-height: 30px;
   max-height: 260px; 
   overflow:hidden;
  overflow-x: hidden; 
}

/* highlighter */
.highlight {
  position:absolute;
  height:50%; 
  width:100%; 
  top:15%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
.floating-input:focus ~ .highlight , .floating-select:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* animation */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}


</style>

<script>
function validatefloatinput(event){
  let elm = event.target;
  $(elm).siblings('.errortext').empty();
  $(elm).siblings('.errorwrapper').empty();
  
}

</script>

<pega:choose>
     <pega:when test='param.Size != ""'>
         <pega:save name="strExpectedSize" ref="param.Size" />
     </pega:when>
     <pega:when java='<%= !tools.getDictionary().fromDefinition(tools.getActive(), "pyExpectedSize").equals("") %>'>
         <% tools.putSaveValue("strExpectedSize", tools.getDictionary().fromDefinition(tools.getActive(), "pyExpectedSize")); %>
     </pega:when>
     <pega:otherwise>
         <pega:save name="strExpectedSize" value="8" />
     </pega:otherwise>
 </pega:choose>
 <pega:save name="strExpectedSize" value="8" />
<pega:when test='param.ReadOnlySmartInfo != "" || param.ReadWriteSmartInfo != ""'>
	<pega:include name="StartSmartField" />
</pega:when>
<% 
    ClipboardProperty curProp = tools.getActive();
	  String strValue="";
	String messageOnProp = curProp.getMessages();
   	boolean propHasValidValue = curProp.hasValidValue();
	String messageOnPropAfter = curProp.getMessages();
	if(messageOnPropAfter.equals("") && !messageOnProp.equals("")){
		curProp.addMessage(messageOnProp);
	}
    
         tools.putSaveValue("formattedNumber",tools.getActiveValue());
        strValue = tools.getActiveValue();
        strValue = StringUtils.crossScriptingFilter(strValue);
        tools.putSaveValue("result", strValue);
    
%>

<pega:choose>
	<pega:when java='<%=tools.getParamAsBoolean(PropertyInfo.TYPE_TRUEFALSE,"CalculatedValue")%>'>
		<%-- YOU MUST PASS ALONG ALL PARAMETERS HERE!!!! --%>
		<SPAN nowrap>
		<pega:include name="Messages"/>
		<span id="CV" name="<pega:reference name='$this-name' mode="NORMAL" />"	RHP_NAME="<pega:reference name='$stream-definition(pyStreamName)' mode="NORMAL" />" class='dataLabelCalculatedValue' >
				<%=tools.getSaveValue("result")%>
		</SPAN>
	</pega:when>
	<pega:otherwise>
		<pega:choose>
			<pega:when test='$mode-input'>
		    			<SPAN nowrap>
		       			
                 <div class="floating-label">
                     <small class="errorwrapper"> <pega:include name="Messages"/></small>
		        			<input  class="floating-input" placeholder="  " <pega:include name="ClientValidation"/> type="text" 
								size="<pega:reference name="$save(strExpectedSize)" />"
								name="<pega:reference name="$this-name" />"
						 		id="<pega:reference name="$THIS-DEFINITION(pyPropertyName)" /><%= StringUtils.crossScriptingFilter(tools.getParamValue("pega_RLindex")) %>" 
								value="<pega:reference name="$save(formattedNumber)" />" 
                onchange="javascript:validatefloatinput(event)" 
                /> 
                  
                  <span class="highlight"></span>
                  <label class="float-label"><%=tools.getParamValue("Label") %></label>
                  <small style="color:red;" class= "errortext <% if(messageOnPropAfter.length()>0){  %> error <% } %> " > <%= messageOnPropAfter %></small>
                </div>          
        </SPAN>
			</pega:when>
			<pega:otherwise>
						<%=tools.getSaveValue("result")%>
			</pega:otherwise>
		</pega:choose>
	</pega:otherwise>
</pega:choose>
<pega:when test='param.ReadOnlySmartInfo != "" || param.ReadWriteSmartInfo != ""'>
	<pega:include name="EndSmartField" />
</pega:when>