Basic form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSFORM</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<form name="basicform" onsubmit="return fun()" >
<div class="row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg"> Name </label>
<div class="col-sm-10">
<input type="text" name="name" placeholder="Name" />
<span id="nameerror"></span>
</div>
<div class="row">
<label for="col-form-label-lg" class="col-sm-2 col-form-label col-form-label-lg"> Mobile </label>
<div class="col-sm-10">
<input type="text" name="mobile" placeholder="Mobile Numbers" />
<span id="mobileerror"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<input type="submit" value="Register" class="btn btn-primary">
</div>
</div>
</form>
<!-- SCRIPT -->
<script>
function fun() {
var name,mobile,result,error=0;
name= document.forms.basicform.name.value;
mobile= document.forms.basicform.mobile.value;
/////validate first number
if (name==="")
{
//alert("first No. is Mandatory");
document.getElementById("nameerror").innerHTML="name is Mandatory";
error=1;
}
else if(!isNaN(name ))
{
// alert("only Numerical value allowed");
document.getElementById("nameerror").innerHTML=" Numbers not Allowed";
error=1;
}
////////// Validate second number
if(mobile==="")
{
//alert("mobile is Mandatory");
document.getElementById("mobileerror").innerHTML=" mobile is Mandatory";
error=1;
}
else if(isNaN(mobile ))
{
document.getElementById("mobileerror").innerHTML=" Enter numerical value";
error=1;
}
if (error===1)
{
return false;
}
else{
result=parseInt(name)+ parseInt(mobile);
alert("Result="+result);
}
}
</script>
</body>
</html>
Comments
Post a Comment