"FORM DESIGN WITH JS VALIDATION"
Bootstrap 4.1.1 Snippet by ShadCS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body class="bg-dark">
<header class="bg-dark" style="height: 60px; padding: 5px;">
<h3 class="text-light" style="text-align: center;">FORM DESIGN WITH JS VALIDATION</h3>
</header>
<div class="container bg-dark">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-6 bg-light boxStyle">
<form name="theform" action="" onSubmit="validate()" >
<div class="form-group">
<div class="width30 floatL"><label>Firstname</label></div>
<div class="width70 floatR"><input id="firstname" class="width100 form-control" name="firstname" type="text" value="" size="20">
</div><br><br>
<div class="form-group">
<div class="width30 floatL"><label>Lastname</label></div>
<div class="width70 floatR"><input class="width100 form-control" name="lastname" type="text" value="" size="20"></div>
</div><br>
<div class="form-group">
<div class="width30 floatL"><label>Email</label></div>
<div class="width70 floatR"><input class="width100 form-control" name="email" src="" type="text" value="" size="20"></div>
</div><br>
<div class="form-group">
<div class="width30 floatL"><label>Age</label></div>
<div class="width70 floatR"><input class="width100 form-control" name="age" type="text" value="" size="20"></div>
</div><br>
<div class="form-group">
<div class="width30 floatL"><label>Address</label></div>
<div class="width70 floatR"><input class="width100 form-control" name="address" type="text" value="" size="20"></div>
</div><br>
<div class="form-group">
<div class="width30 floatL"><label>Country</label></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.width30 {
width: 30%;
}
.width70 {
width: 70%;
}
.floatL{
float: left;
}
.width50{
width: 50%;
}
.floatR{
float: right;
}
.btn{
width: 100%;
border-radius: 0px;
}
.width100{
width: 100%;
}
.row{
margin-left: -20px;
margin-right: -20px;
}
.boxStyle{
padding: 20px;
border-radius: 25px;
border-top: 6px solid #dc3545;
border-bottom: 6px solid #28a745;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function validate(){
var alertText="";
var f=theform.ch.value;
var r=theform.ch.value;
var s=theform.ch.value;
var fn=document.getElementById("firstname").value;
var ln=theform.lastname.value;
var m=theform.email.value;
var co=theform.country.value;
var ag=theform.age.value;
var ad=theform.address.value;
if(fn===""){alertText=alertText+"1-please enter firstname\n";}
if(ln===""){alertText+="2-please enter lastname\n";}
if(m===""){alertText+="3-please enter email\n";}
if(ag===""){alertText+=" 4-please enter Age\n";}
if(ad===""){alertText+="5- please enter adress\n";}
if(co===""){alertText+="6-please enter country\n";}
if(isNaN(ag)){ window.alert(" The Age NOT Number");}
var group = theform.ch;
for (var i=0; i<group.length; i++) {
if (group[i].checked)
break;
}
if (i==group.length){
alertText+="7-please enter interests\n";
}
if(alertText!=="") {window.alert(alertText);}
if(m.indexOf('@')==-1 && m.indexOf('\.')==-1) window.alert("The Email without the @ and dot");
}//end function
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: