Form validator
<!DOCTYPE html>
<html>
<head>
<title>
form_copy
</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="main.js">
<script type="text/javascript">
function formValidator() {
var firstname = document.getElementById("firstname");
var lastname = document.getElementById("lastname");
var email = document.getElementById("email")
var password = document.getElementById("pass")
var radio = document.getElementById("radio")
var radio2 = document.getElementById("radio2")
if (isAlphabet(firstname, "pls enter only letter for firstname")) {
if (isAlphabet(lastname, "pls enter only letter for lastname")) {
if (emailvalidator(email, "pls enter a proper email id ")) {
if (passvalidator(password, "pls enter only 8 character")) {
if (madeSelection(radio, radio2, "pls fill any one option")) {
return true;
}
}
}
}
}
return false;
}
function isAlphabet(elem, helperMsg) {
var alphaExp = /^[a-zA-z]+$/;
if (elem.value.match(alphaExp)) {
return true;
}
else {
alert(helperMsg);
elem.focus();
return false;
}
}
function emailvalidator(elem, helperMsg) {
var alphaExp = /^\w+([\.-]?\w+)@\w+([\.-]?\w+)(\.\w{2,3})+$/;
if (elem.value.match(alphaExp)) {
return true;
}
else {
alert(helperMsg);
elem.focus();
return false;
}
}
function passvalidator(elem, helperMsg) {
var alphaExp = /^[a-zA-Z0-9]\w{2,3}+$/;
if (elem.value.match(alphaExp)) {
return true;
}
else {
alert(helperMsg);
elem.focus();
return false;
}
}
function madeSelection(elem, elem2, helperMsg) {
console.log(elem.value);
console.log(elem2.value);
if (elem.value == false && elem2.value == false) {
alert(helperMsg);
elem.focus();
return false;
} else {
return true;
}
}
</script>
</head>
<body bgcolor="#030720" text="white">
<ul>
<li class="space"><img src="rocket.png" class="rocket_img" width="50px" height="50px"></li>
<li class="space">Space Travel</li>
</ul>
<br>
<br>
<div align="center">
<div class="for">
<h1><i>Registration Form</i></h1><br>
<form onsubmit="return formValidator()" action="validated.html" method="post"
align="center" border="solid">
First name:<input type="text" name="firstname" size="12" id="firstname"><br><br>
Last name:<input type="text" name="lastname" size="10" id="lastname"><br><br>
Email:<input type="email" name="email" id="email"><br><br>
password:<input type="password" id="pass" name="pwd"> <br><br>
Gender:<input type="radio" name="Gender" value="male" id="radio"> Male
<input type="radio" name="Gender" value="female" id="radio2"> Female<br><br>
Age : <input type="number" name="age" min="0" max="100" step="2" value="0"><br><br>
<!-- Mobile number (123-456-7890) : <input type="tel" name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"><br><br> -->
qualification:<select name="qualification">
<option>Adult</option>
<option>Student</option>
<option>Below 18</option>
</select>
<br><br>
<div align="center" class="sub">
<input type="submit" value="Submit" class="sub">
<input type="reset" value="Reset" class="sub"><br><br>
</div>
<!-- <input type="button" onclick="alert('Hello')" value="Click me !!"> -->
</form>
</div>
</div>
</body>
Jquery
<!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" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#but").click(function () {
// $(".para").css("background-color","red");
// $(".para").slideUp("3000");
// $(".para").slideDown( "1000");
// $(".para2").css("font-family","Times New Roman").fadeIn("slow").css("font-
family","Monotype Corsiva");
// $(".para2").animate({ fontSize:"32px"}, "slow");
// $(".para2").slideUp("10000");
// $(".con").slideDown( "slow");
// $(".con").animate({ height: "250px",width:"100px" }, "slow");
// $(".con").animate({ height: "200px",width:"200px" ,left:"250px",top:"250"}, "slow");
// $(".con").animate({ height:
"20px",width:"200px" ,left:"250px",top:"250",fontSize:"32px",opacity:"0.3"}, "slow");
// $(".con").animate({ height:
"100px",width:"100px",left:"0px",fontSize:"20px",top:"0px",opacity:"1" }, "slow");
// $(".con").slideUp( "slow");
// $(".con").slideDown( "slow");
});
});
</script>
<style>
/* .para{
position: relative;
} */
.para2{
background-color: tomato;
position: relative;
display:none;
/* .con {
height: 100px;
width:100px;
background-color: tomato;
position: relative;
display: none;
} */
</style>
</head>
<body>
<input type="button" value="amnimate" id="but" />
<!-- <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, beatae
excepturi necessitatibus id atque magnam, voluptatem molestiae tempore facilis nobis vero in
autem vitae veniam minus ratione eaque optio ea!</p> -->
<p class="para2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, beatae excepturi
necessitatibus id atque magnam, voluptatem molestiae tempore facilis nobis vero in autem vitae
veniam minus ratione eaque optio ea!</p>
<!-- <div class="con">HELLO WORLD</div> -->
</body>
</html>
Syntax for combination of Jquery, Bootstrap and Javascript
<!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">
<title>Document</title>
<link rel="stylesheet" href="bootstrap-5.2.1-dist/css/bootstrap.css">
<script src="bootstrap-5.2.1-dist/js/bootstrap.js"></script>
<script>
</script>
<script src="jquery-3.6.1 (1).js"></script>
<script>
$(document).ready(function () {
$("#but").click(function () {
// $(".para").hide();
$(".para").animate({ left: '250px', top: "250px" });
});
});
</script>
</head>
<body>
<!-- <div class="para"></div>
<input type="button" value="click me" id="but"> -->
<div class="container">
<div class="row">
<div class="col-sm-12" style="background-color: aqua;">hellu</div>
</div>
</div>
</div>
</body>
<style>
.para {
background-color: tomato;
height: 250px;
width: 250px;
position: relative;
}
</style>
</html>
Miss ka Form validation
<html><head>
<title>form validation</title>
<script type="text/javascript">
function formValidator(){
// Make quick references to our fields
var firstname = document.getElementById("firstname");
var addr = document.getElementById("addr");
var zip = document.getElementById("zip");
var state = document.getElementById("state");
var username = document.getElementById("username");
var email = document.getElementById("email");
// Check each input in the order that it appears in the form!
if(isAlphabet(firstname, "Please enter only letters for your name")){
if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
if(isNumeric(zip, "Please enter a valid zip code")){
if(madeSelection(state, "Please Choose a State")){
if(lengthRestriction(username, 6, 8)){
if(emailValidator(email, "Please enter a valid email address")){
return true;
}
}
}
}
}
}
return false;
function notEmpty(elem, helperMsg){
if(elem.value == ""){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function lengthRestriction(elem, min, max){
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max){
return true;
}else{
alert("Please enter between " +min+ " and " +max+ " characters");
elem.focus();
return false;
}
}
function madeSelection(elem, helperMsg){
if(elem.value == "Please Choose"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}
function emailValidator(elem, helperMsg){
var emailExp = /^\w+([\.-]?\w+)@\w+([\.-]?\w+)(\.\w{2,3})+$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>
</head>
<body>
<form onsubmit="return formValidator()" action="validated.html">
First Name: <input type="text" id="firstname"><br>
Address: <input type="text" id="addr"><br>
Zip Code: <input type="text" id="zip"><br>
State: <select id="state">
<option>Please Choose</option>
<option>AL</option>
<option>CA</option>
<option>TX</option>
<option>WI</option>
</select><br>
Username(6-8 characters): <input type="text" id="username"><br>
Email: <input type="text" id="email"><br>
<input type="submit" value="Check Form">
</form>
</body></html>
