form with validation & profile image
<!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>form with validation & profile image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.blink {
animation: blinkMe 2s linear infinite;
}
.thead-dark-green {
background: #4f9e7e;
}
.th-head {
font-weight: lighter;
color: #fff;
}
.thumb-image {
width: 100px;
height: 100px;
border: 1px solid #28a745;
margin: 5px;
}
</style>
<script src="cities.js"></script>
</head>
<body>
<div class="container bg-light p-5 border">
<!--<form onsubmit="submit()" >-->
<input type="date" id="year">
<button type="button" onclick="dateobject()" class="btn btn-outline-success btn-large ml-5 mr-5">
Verify</button>
<div id="showresult" style="display: none;">
<div class="row blockquote text-dark text-center text-uppercase alert alert-success m-5">
<h4>Congratulation you are eligible.</h4>
</div>
<div class="row">
<div class="col-md-6">
<form class="form-horizontal form-group" method="post">
<div class="form-group">
<label for="firstname">Firstname :</label>
<input type="text" id="fname" onfocusout="verifyname()"
placeholder="Please enter your firstname" class="form-control" required />
<span id="al"></span>
</div>
<div class="form-group">
<label for="mobile no">Mobile No :</label>
<input type="tel" id="mobileno" onfocusout="verifymobileno(this)"
placeholder="Please enter your mobile no" class="form-control" required />
<span id="mn"></span>
</div>
<div class="form-group">
<label for="password">Password :</label>
<input type="password" id="ppwd" onfocusout="verifypwd(this)"
placeholder="Please enter your password" class="form-control" required />
<span id="pw1"></span>
</div>
<div class="form-group">
<label for="state">State :</label>
<select class="form-control" onchange="print_city('state', this.selectedIndex);"
id="sts" name="stt" required>
<!-- <option value="MH">Maharashtra</option> -->
</select>
</div>
<div class="form-group">
<label for="userid">User Id :</label>
<input type="box" id="userid" class="form-control" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lname">Lastname :</label>
<input type="text" id="lname" onfocusout="verifylname()"
placeholder="Please enter your lastname" class="form-control" required />
<span id="ln"></span>
</div>
<div class="form-group">
<label for="email">Email-id :</label>
<input type="email" id="mail" onfocusout="verifyemail()"
placeholder="Please enter your email-id" class="form-control" required />
<span id="em"></span>
</div>
<div class="form-group">
<label for="confirmpassword">Confirm Password :</label>
<input type="password" id="cppwd" onfocusout="verifycpwd(this)"
placeholder="Enter here confirm password" class="form-control" required />
<Span id="cppwd1"></Span>
</div>
<div class="form-group">
<label for="city">City :</label>
<select id="state" class="form-control" required></select>
<script language="javascript">
print_state("sts");
</script>
</div>
<div class="from-group ">
<!-- <div class="col-md-8"col-md-12 col-md-4></div> -->
<label for="uploadprofileimage">Upload Profile Image :</label>
<input type="file" id="proimg" onchange="validateImage()" name="profile photo"
placeholder="Choose your profile photo" class="form-control" required>
<img src="default-profile-picture.png" id="profileimage" alt="" class="thumb-image">
<!-- <div class="align-right"></div> -->
<span id="proimg1"></span>
</div>
</div>
<!-- <div id="wrapper" style="margin-top: 20px;"><input id="fileUpload" multiple="multiple" type="file"/>
<div id="image-holder"></div> -->
<!-- <div class="form-group center">
<label for="submit"></label>
<button type="submit" id="sub" class="btn btn-outline-success btn-large" value="Submit"
onsubmit="submit()">Submit
</button>
</div> -->
</div>
<div class="row center">
<button type="" onclick="adddata()" class="btn btn-outline-success btn-sm btn-block">Insert your
information in below table:</button>
<!-- click here -->
</div>
<div class="row">
<table class="mt-5 table table-striped table-responsive table-bordered table-hover" id="as1">
<thead class="thead-dark-green th-head">
<th>First name</th>
<th>Last name</th>
<th>Email-id</th>
<th>Mobile No</th>
<th>State</th>
<th>City</th>
<th>Password</th>
<th>Confirm Password</th>
<th>User Id</th>
<th>Profile Image</th>
<th>Add Button </th>
<th>Delete Button</th>
</thead>
<tbody id="tabdata">
</tbody>
</table>
</div>
</div>
<!-- </form> -->
</div>
<script>
//calendar
function dateobject() {
a = document.getElementById("year").value;
const dob = new Date(a);
let currdate = new Date();
let age = currdate.getFullYear() - dob.getFullYear();
if (age > 18) {
document.getElementById("showresult").style.display = "block";
} else {
document.getElementById("showresult").innerHTML = "Sorry you are not eligible for vote."
}
}
//fname
function verifyname() {
var fname = document.getElementById("fname").value;
var regexname = /^[a-zA-Z ]{2,30}$/;
if (regexname.test(fname)) {
document.getElementById("al").innerHTML = fname + " " + "your name is valid.";
document.getElementById("fname").classList.add("is-valid");
document.getElementById("al").classList.add("text-success");
document.getElementById("fname").classList.remove("is-invalid");
document.getElementById("al").classList.remove("text-danger");
}
else {
document.getElementById("al").innerHTML = fname + " " + "your name is invalid.";
document.getElementById("al").classList.add("text-danger");
document.getElementById("fname").classList.add("is-invalid");
document.getElementById("al").classList.add("text-danger");
document.getElementById("fname").classList.remove("is-valid");
document.getElementById("al").classList.remove("text-success");
}
}
//lastname
function verifylname() {
var lname = document.getElementById("lname").value;
var regexlname = /^[a-zA-Z ]{2,30}$/;
if (regexlname.test(lname)) {
document.getElementById("ln").innerHTML = lname + " " + "your lastname is valid.";
document.getElementById("lname").classList.add("is-valid");
document.getElementById("ln").classList.add("text-success");
document.getElementById("lname").classList.remove("is-invalid");
document.getElementById("ln").classList.remove("text-danger");
uid();
}
else {
document.getElementById("ln").innerHTML = lname + " " + "your lastname is invalid.";
document.getElementById("ln").classList.add("text-danger");
document.getElementById("lname").classList.add("is-invalid");
document.getElementById("ln").classList.add("text-danger");
document.getElementById("lname").classList.remove("is-valid");
document.getElementById("ln").classList.remove("text-success");
}
}
//email
function verifyemail() {
var mail = document.getElementById("mail").value;
var regexmail = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if (regexmail.test(mail)) {
document.getElementById("em").innerHTML = mail + " " + "your email-id is valid.";
document.getElementById("mail").classList.add("is-valid");
document.getElementById("em").classList.add("text-success");
document.getElementById("mail").classList.remove("is-invalid");
document.getElementById("em").classList.remove("text-danger");
}
else {
document.getElementById("em").innerHTML = mail + " " + "your email-id is invalid.";
document.getElementById("em").classList.add("text-danger");
document.getElementById("mail").classList.add("is-invalid");
document.getElementById("em").classList.add("text-danger");
document.getElementById("mail").classList.remove("is-valid");
document.getElementById("em").classList.remove("text-success");
}
}
//mobile no
function verifymobileno() {
var mobileno = document.getElementById("mobileno").value;
var regexmobileno = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/;
if (regexmobileno.test(mobileno)) {
document.getElementById("mn").innerHTML = mobileno + " " + "your mobile no is valid.";
document.getElementById("mobileno").classList.add("is-valid");
document.getElementById("mn").classList.add("text-success");
document.getElementById("mobileno").classList.remove("is-invalid");
document.getElementById("mn").classList.remove("text-danger");
uid();
}
else {
document.getElementById("mn").innerHTML = mobileno + " " + "your mobile no is invalid.";
document.getElementById("mn").classList.add("text-danger");
document.getElementById("mobileno").classList.add("is-invalid");
document.getElementById("mn").classList.add("text-danger");
document.getElementById("mobileno").classList.remove("is-valid");
document.getElementById("mn").classList.remove("text-success");
}
}
//state
// function print_city() {
// var state1 = document.getElementById("state1").value;
// var regexstate1 = / /;
// if (regexstate1.test(state1)) {
// document.getElementById("sts").innerHTML = state1 + " " + "your mobile no is valid.";
// document.getElementById("state1").classList.add("is-valid");
// document.getElementById("sts").classList.add("text-success");
// document.getElementById("state1").classList.remove("is-invalid");
// document.getElementById("sts").classList.remove("text-danger");
// }
// else {
// document.getElementById("sts").innerHTML = state1 + " " + "your mobile no is invalid.";
// document.getElementById("sts").classList.add("text-danger");
// document.getElementById("state1").classList.add("is-invalid");
// document.getElementById("sts").classList.add("text-danger");
// document.getElementById("state1").classList.remove("is-valid");
// document.getElementById("sts").classList.remove("text-success");
// }
// }
//pwd
function verifypwd() {
var ppwd = document.getElementById("ppwd").value;
var regexpwd = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
if (regexpwd.test(ppwd)) {
document.getElementById("pw1").innerHTML = "your password is valid.";
document.getElementById("ppwd").classList.add("is-valid");
document.getElementById("pw1").classList.add("text-success");
document.getElementById("ppwd").classList.remove("is-invalid");
document.getElementById("pw1").classList.remove("text-danger");
}
else {
document.getElementById("pw1").innerHTML = "your password is invalid.";
document.getElementById("pw1").classList.add("text-danger");
document.getElementById("ppwd").classList.add("is-invalid");
document.getElementById("ppwd").classList.remove("is-valid");
document.getElementById("pw1").classList.remove("text-success");
}
}
//cpwd
function verifycpwd() {
var cppwd = document.getElementById("cppwd").value;
var regexcpwd = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
if (regexcpwd.test(cppwd)) {
document.getElementById("cppwd1").innerHTML = "your confirm password is valid."
document.getElementById("cppwd").classList.add("is-valid");
document.getElementById("cppwd1").classList.add("text-success");
document.getElementById("cppwd").classList.remove("is-invalid");
document.getElementById("cppwd1").classList.remove("text-danger");
}
else if (!res) {
document.getElementById("cppwd1").classList.add("is-invalid");
document.getElementById("cppwd1").innerHTML = "Invalid Input";
document.getElementById("cppwd").classList.add("text-danger");
document.getElementById("cppwd").classList.remove("is-valid");
document.getElementById("cppwd1").classList.remove("text-success");
}
else if (cppwd != document.getElementById("pw1").value) {
// password does not match Invalid Input
document.getElementById("cppwd").classList.add("is-invalid");
document.getElementById("cppwd1").innerHTML = "password does not match";
document.getElementById("cppwd1").classList.add("text-danger");
}
}
//user id
function uid() {
let usname, mobval, lsname;
let userid1 = document.getElementById("fname").value;
let userid11 = document.getElementById("lname").value;
mobval = document.getElementById("mobileno").value;
lsname = document.getElementById("lname").value;
mobval = mobval.slice(0, 4);
lsname = lsname.slice(0, 4);
document.getElementById("userid").value = userid1.slice(0, 2) + userid11.slice(0, 2) + "_" + mobval.slice(0, 4);
}
//profile image
function validateImage() {
var formData = new FormData();
var file = document.getElementById("proimg").files[0];
formData.append("Filedata", file);
var t = file.type.split('/').pop().toLowerCase();
var fsize = (file.size / 1024 / 1024).toFixed(2);
if (t != "jpeg" && t != "jpg" && t != "png" && t != "bmp" && t != "gif") {
document.getElementById("proimg").value = '';
document.getElementById("proimg1").innerHTML = "Only jpg, jpeg, png, bmp and gif file allowed";
document.getElementById("proimg").classList.add("is-invalid");
document.getElementById("proimg1").classList.add("text-danger");
document.getElementById("proimg").classList.remove("is-valid");
document.getElementById("proimg1").classList.remove("text-success");
return false;
}
else if (fsize > 2) {
document.getElementById("proimg1").innerHTML = "Max Upload size is 2MB only";
document.getElementById("proimg1").classList.add("text-danger");
document.getElementById("proimg").classList.add("is-invalid");
document.getElementById("proimg").classList.remove("is-valid");
document.getElementById("proimg1").classList.remove("text-success");
}
else {
document.getElementById("proimg1").innerHTML = "Max Upload size is 2MB only";
document.getElementById("proimg1").classList.add("text-danger");
document.getElementById("proimg").classList.add("is-invalid");
document.getElementById("proimg").classList.remove("is-valid");
document.getElementById("proimg1").classList.remove("text-success");
}
if (fsize > 2) {
document.getElementById("proimg").value = '';
return false;
}
else if (fsize) {
document.getElementById("proimg1").classList.add("text-success");
document.getElementById("proimg").classList.add("is-valid");
document.getElementById("proimg").classList.remove("is-invalid");
document.getElementById("proimg1").classList.remove("text-danger");
}
return true;
}
//profile image 2 code start
// function readURL(input) {
// if (input.files && input.files[0]) {
// var reader = new FileReader();
// reader.onload = function (e) {
// $('#profilediv').css('background-image', 'url(' + e.target.result + ')');
// document.getElementById("imgid").src = e.target.result;
// var file_data = $('#fileupload').prop('files')[0];
// var form_data = new FormData();
// form_data.append('file', file_data);
// // alert(form_data);
// };
// reader.readAsDataURL(input.files[0]);
// }
// }
//profile image 2 code end
//profile img 3 code start
$(document).ready(function () {
$("#proimg").on('change', function () {
//Get count of selected files
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var proimg1 = $("#proimg1");
proimg1.empty();
//if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof (FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function (e) {
// $("<img />", {
// "src": e.target.result,
// "class": "thumb-image"
// }).appendTo(proimg1);
$("#profileimage").attr("src", e.target.result);
}
proimg1.show();
reader.readAsDataURL($(this)[0].files[i]);
document.getElementById("proimg1").innerHTML = "Image is uploaded successfully.";
}
}
else {
alert("Pls select only images");
}
});
});
//profile img 3 code end
//submit
// function submit(btnsub) {
// let subm = btnsub.value;
// }
//table data
let myobjectarray = [];
function adddata() {
let myobject = {
"Firstname": document.getElementById("fname").value,
"Lastname": document.getElementById("lname").value,
"Email": document.getElementById("mail").value,
"Mobileno": document.getElementById("mobileno").value,
"State": document.getElementById("sts").value,
"City": document.getElementById("state").value,
"Password": document.getElementById("ppwd").value,
"Confirmpassword": document.getElementById("cppwd").value,
"Userid": document.getElementById("userid").value,
"Profileimg": document.getElementById("proimg").value,
};
myobjectarray.push(myobject);
showdata();
cleardata();
}
function cleardata() {
document.getElementById("fname").value = "";
document.getElementById("lname").value = "";
document.getElementById("mail").value = "";
document.getElementById("mobileno").value = "";
document.getElementById("sts").value = "";
document.getElementById("state").value = "";
document.getElementById("ppwd").value = "";
document.getElementById("cppwd").value = "";
document.getElementById("userid").value = "";
document.getElementById("profileimage").src = "./default-profile-picture.png";
document.getElementById("proimg").value = "";
}
function removedata(index) {
myobjectarray.splice(index, 1);
showdata();
}
function insertdata(index) {
console.log(myobjectarray[index]);;
document.getElementById("fname").value = myobjectarray[index].Firstname;
document.getElementById("lname").value = myobjectarray[index].Lastname;
document.getElementById("mail").value = myobjectarray[index].Email;
document.getElementById("mobileno").value = myobjectarray[index].Mobileno;
document.getElementById("sts").value = myobjectarray[index].State;
document.getElementById("state").value = myobjectarray[index].City;
document.getElementById("ppwd").value = myobjectarray[index].Password;
document.getElementById("cppwd").value = myobjectarray[index].Confirmpassword;
document.getElementById("userid").value = myobjectarray[index].Userid;
document.getElementById("profileimage").src = myobjectarray[index].Profileimg;
}
function showdata() {
let str = "";
for (let i = 0; i < myobjectarray.length; i++) {
str += "<tr><td>"
+ myobjectarray[i].Firstname
+ "</td><td>"
+ myobjectarray[i].Lastname
+ "</td><td>"
+ myobjectarray[i].Email
+ "</td><td>"
+ myobjectarray[i].Mobileno
+ "</td><td>"
+ myobjectarray[i].State
+ "</td><td>"
+ myobjectarray[i].City
+ "</td><td>"
+ myobjectarray[i].Password
+ "</td><td>"
+ myobjectarray[i].Confirmpassword
+ "</td><td>"
+ myobjectarray[i].Userid
+ "</td><td>"
+ myobjectarray[i].Profileimg
+ "</td><td>"
+ "<button class='btn btn-outline-primary' onclick='insertdata(" + i + ")'><i class='fa fa-plus'></i></button></td><td>"
+ "<button class='btn btn-outline-warning' onclick='removedata(" + i + ")'><i class='fa fa-trash'></i></button></td></tr>"
;
}
document.getElementById("tabdata").innerHTML = str;
}
</script>
</body>
</html>
Comments
Post a Comment