Scribd
Upload
7 views

Code

The document describes a form validation script that checks various form fields for valid input. The script contains multiple functions that validate fields like name, address, zip code, email, etc by checking data types, length, required selections. The functions return true or false and can alert the user of invalid inputs.

Uploaded by

sparenilesh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

Code

The document describes a form validation script that checks various form fields for valid input. The script contains multiple functions that validate fields like name, address, zip code, email, etc by checking data types, length, required selections. The functions return true or false and can alert the user of invalid inputs.

Uploaded by

sparenilesh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

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>

You might also like