Example1

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>

<form>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label for="txtNo1">First no</label>
                    <input type="text" placeholder="10" id="txtNo1" class="form-control">
                    <small id="lblNo1" class="form-text text-muted"></small>


                </div>


               <div class="form-group">
                    <label for="txtNo2">Second no</label>
                    <input type="text" placeholder="10" id="txtNo2" class="form-control">
                   <small id="emailHelp" class="form-text text-muted">Enter integer number</small>

                </div>
                <div id="result"></div>

    <input type="button" id="btnAdd" class="btn btn-success" value="add">

            </div>
        </div>
    </div>

</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
    $(document).ready(function(){
        $("#txtNo1").focus()
$("#btnAdd").on('click',function(){
    var no1= parseFloat($("#txtNo1").val())
    var no2= parseFloat($("#txtNo2").val())
    $("#result").html("<h1>"+(no1+no2)+"</h2>")


})
        $("#txtNo1").focusout(function(){
            var i = $(this).val()
            if(! $.isNumeric(i)){
                $("#lblNo1").text('invalid number')
                $("#txtNo1").focus()



            }
});

    });
</script>
</body>
</html>
(Continue)