<!
DOCTYPE
html
>
<
html
lang
= "en"
xmlns
= "http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
charset
= "utf-8"
/>
<
title
>
Welcome Example </
title
>
<
link
href
= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel
= "stylesheet"
integrity
= "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin
= "anonymous"
>
<
script
src
= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity
= "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin
= "anonymous"
></
script
>
</
head
>
<
body
>
<
div
class
= "container"
>
<
div
style
= "
display: flex;"
>
<
div
class
= "card"
style
= "
margin-left:auto;margin-right: auto;margin-top: 5rem;width: 20rem;"
>
<
div
class
= "card-header"
>
Test Form
</
div
>
<
div
class
= "card-body"
>
<
div
class
= "form-floating mb-3"
id
= "InputHostDiv"
>
<
input
type
= "number"
oninput
= "
InputTagOnInput
();"
class
= "form-control"
placeholder
= "Requested Ammount"
id
= "InputTag"
>
<
label
>
Requested Ammount </
label
>
</
div
>
<
a
href
= "javascript:void(0);"
class
= "btn btn-primary"
onclick
= "
CallBhtml
('ConformClick');"
>
Confirm </
a
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
var
delayId
= null
;
function
InputTagOnInput
(){
// Call the validation after delay of 1 second
if
( delayId
){
window
. clearTimeout
( delayId
);
delayId
= null
;
}
delayId
= window
. setTimeout
( function
(){ CallBhtml
( "ConformClick"
);}, 1000
);
}
</
script
>
<
script
server.type
= "bhtml"
>
previousValidationStatus
= "Empty"
; //Saves the previous validation status
validationMessageDiv
= null
; //saves the extra div element for the validation message, not needed when empty.
ConformClick
() {
let
validationStatus
= this
. getValidationStatus
(); //get the current validation status, Empty/Valid/Invalid
if
( validationStatus
== this
. previousValidationStatus
){
//the same validation status as previous check no need to modify UI
return
;
}
if
( validationStatus
== "Empty"
){
//removing the previous validatation message div
this
. validationMessageDiv
. remove
();
//removing valid or invalid indication from the input tag
this
. document
. getElementById
( "InputTag"
). setAttribute
( "class"
, "form-control"
);
}
else
{
if
( this
. previousValidationStatus
== "Empty"
){
//creating a div for displaying the validation message
this
. validationMessageDiv
= this
. document
. createElement
( "div"
);
this
. document
. getElementById
( "InputHostDiv"
). appendChild
( this
. validationMessageDiv
);
}
if
( validationStatus
== "Valid"
){
//adding valid indication to the input tag
this
. document
. getElementById
( "InputTag"
). setAttribute
( "class"
, "form-control is-valid"
);
//adding valid indication to the message div
this
. validationMessageDiv
. setAttribute
( "class"
, "valid-feedback"
);
//setting a valid message
this
. validationMessageDiv
. innerHTML
= "Value is valid"
;
} else
{
//adding invalid indication to the input tag
this
. document
. getElementById
( "InputTag"
). setAttribute
( "class"
, "form-control is-invalid"
);
//adding invalid indication to the message div
this
. validationMessageDiv
. setAttribute
( "class"
, "invalid-feedback"
);
//setting an invalid message
this
. validationMessageDiv
. innerHTML
= "Invalid value, should be between 1 and 500"
;
}
}
this
. previousValidationStatus
= validationStatus
;
}
getValidationStatus
(){
//return Empty, Valid, or Invalid
//valid value, a number between 1 and 500
let
amount
= this
. document
. getElementById
( "InputTag"
). value
;
if
( amount
== ""
) {
return
"Empty"
;
}
else
if
( Number
( amount
) >= 1
&& Number
( amount
) <= 500
){
return
"Valid"
;
} else
{
return
"Invalid"
;
}
}
</
script
>
</
body
>
</
html
>
