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

<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> <div class="width70 floatR"><input class="width100 form-control" name="country" type="text" value="" size="20"></div> </div><br> <div class="form-group"> <div class="width30 floatL"><label>Password</label></div> <div class="width70 floatR"><input class="width100 form-control" name="password" size="20" type="password"></div> </div><br> <div class="form-group"> <div class="width30 floatL"><label>R-Password</label></div> <div class="width70 floatR"><input class="width100 form-control" name="password2" type="password" size="20"></div> </div><br> <div class="form-group"> <div class="width30 floatL"><label>Interests:</label></div> </div> <div class="width70 floatR"><div class="form-group"> <input name="ch" value="travel" type="radio"> <label for="customRadio">Travel</label> <input name="ch" value="reading" type="radio"> <label for="customRadio">Reading</label> <input name="ch" value="swimming" type="radio"> <label for="customRadio">Swimming</label> </div></div><br><br><br> <div class="form-group"> <div class="row"> <div class="width50"><input class="btn btn-success" type="submit" value="Submit" style="font-weight: bold"></div> <div class="width50"><input class="btn btn-danger" type="reset" style="font-weight: bold"></div> </div> </div> </form> </div> <div class="col-sm-1"></div> <div class="col-sm-2"></div> </div> </div> <div class="text-light" style="text-align: center; margin-top: 10px;"><p>Prepared by : Shad Yaseen</p></div> </body>
.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; }
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

Related: See More


Questions / Comments: