<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS only -->
<link
href="[Link]
rel="stylesheet"
integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script
src="[Link]
integrity="sha384-
ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<title>Document</title>
<script>
let arr = [];
function validateId(){
var id = [Link]('inputid').value;
if(id == null || id == ''){
[Link]('s1').innerHTML = "Patient id is required";
return false;
}
else{
[Link]('s1').innerHTML = ''
return true;
}
}
function validateName(){
var name = [Link]('inputname').value;
if(name == null || name == ''){
[Link]('s2').innerHTML = "Patient Name is
required";
return false;
}
else{
[Link]('s2').innerHTML = ''
return true;
}
}
function validateAge(){
var age = [Link]('inputage').value;
if(age == null || age == ''){
[Link]('s3').innerHTML = "Patient Age is
required";
return false;
}
else if(age < 1 || age > 99){
[Link]('s3').innerHTML = "age must be in range 1-
99";
}
else{
[Link]('s3').innerHTML = '';
return true;
}
}
function validateType(){
var type = [Link]('inputselect').value;
if(type === '-- select --'){
[Link]('s4').innerHTML = 'Patient Type is
required'
}
else{
[Link]('s4').innerHTML = '';
return true;
}
}
function validateDate(){
var date = [Link]('inputdate').value;
if(date == null || date == ''){
[Link]('s5').innerHTML = 'Registration date is
required'
}
else{
[Link]('s5').innerHTML = '';
return true;
}
}
function Validate(){
if(validateId() && validateName() && validateAge() && validateType() &&
validateDate()){
var id = [Link]('inputid').value;
var name = [Link]('inputname').value;
var age = [Link]('inputage').value;
var type = [Link]('inputselect').value;
var date = [Link]('inputdate').value;
var x = 0;
let obj = {
pid:id,
pname:name,
page:age,
ptype:type,
regdate:date
}
[Link](obj);
}
}
function DisplayAll(){
[Link](arr)
}
</script>
</head>
<body>
<div class="container mt-5 w-50">
<form>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Patient id</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputid">
<span id="s1" style="color:red"></span>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Patient Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputname">
<span id="s2" style="color:red"></span>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Patient Age</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="inputage">
<span id="s3" style="color:red"></span>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Patient Type</label>
<div class="col-sm-10">
<select class="form-select" aria-label="Default select example"
id="inputselect">
<option selected>-- select --</option>
<option value="In Patient">In Patient</option>
<option value="Out Patient">Out Patient</option>
</select>
<span id="s4" style="color:red"></span>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">Registration Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="inputdate">
<span id="s5" style="color:red"></span>
</div>
</div>
<div>
<button type="button" class="btn btn-dark" onClick="Validate()">Add
Details</button>
<button type="button" class="btn btn-dark" onClick="DisplayAll()">Show
All Details</button>
</div>
</form>
</div>
</body>
</html>