user7535929
Reputation:
registration form using javascript
I am just a beginner ,and i was trying to create a form registration using JavaScript.
Its about choosing a book from a library. In this all inputs are mandatory ,and it includes first name, lastname, gender ,email,passwordand a list of books that should be chosen and also the date that is chosen. After validating using JavaScript, display proper error message in text box where there is an error.
It is not displaying the submit button,if I delete the list with books and the date it appears ,but in other cases no.
This is the full code :
<html>
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body
{
font-family:Tahoma, Geneva, sans-serif;
background-image: url("11.jpg");
}
#container{
width:550px;
background-color:rgba(250,250,252,.9);
margin:auto;
margin-top:10px;
margin-bottom:10px;
box-shadow:0 0 3px #999;
opacity:0.4;
}
#container_body
{
padding:20px;
}
.form_title
{
font-size:35px;
color:#141823;
text-align:center;
padding:10px;
font-weight:normal;
}
.head_para{
font-size:19px;
color:#99a2a7;
text-align:center;
font-weight:normal;
}
#form_emri{
padding:25px 0 0 15px;
}
.emrimbiemri
{
margin-right:20px;
}
.input_name{
width:207px;
padding:5px;
font-size:18px;
}
#email_form{
clear:both;
padding:15px 0 10px 0px;
}
.input_email{
width:434px;
padding:5px;
font-size:18px;
}
#Re_email_form
{
padding:10px 0 10px 0px;
}
.input_Re_email
{
width:434px;
padding:5px;
font-size:18px;
}
#password_form
{
padding:10px 0 10px 0px;
}
.input_password
{
width:434px;
padding:5px;
font-size:18px;
}
.birthday_title
{
font-size:16px;
color:#8b919d;
font-weight:normal;
padding:0 0 10px 0;
}
.libri_title
{
font-size:16px;
color:#8b919d;
font-weight:normal;
padding:0 0 10px 0;
}
.d_marrjes
{
font-size:16px;
color:#8b919d;
font-weight:normal;
padding:0 0 10px 0;
}
select
{
padding:5px;
}
#birthday
{
font-size:12px;
color:#8b919d;
padding-top:10px;
}
#radio_button
{
padding:10px 0 0 0;
}
#sign_user
{
font-size:14px;
color:#FFF;
text-align:center;
background-color:#3B5998;
padding:10px;
margin-top:10px;
cursor: pointer;
}
#errorBox
{
color:#F00;
}
</style>
<script type="text/javascript">
function Submit()
{
var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
var fname = document.form.Name.value,
lname = document.form.LastName.value,
femail = document.form.Email.value,
freemail = document.form.enterEmail.value,
fpassword = document.form.Password.value,
fmonth = document.form.birthday_month.value,
fday = document.form.birthday_day.value,
fyear = document.form.birthday_year.value;
flibri=document.form.libri.value;
datMarrje=document.form.d_marrjes.value;
if( fname == "" )
{
document.form.Name.focus() ;
document.getElementById("errorBox").innerHTML = "Fusni emrin ";
return false;
}
if( lname == "" )
{
document.form.LastName.focus() ;
document.getElementById("errorBox").innerHTML = "Fusni mbiemrin";
return false;
}
if (femail == "" )
{
document.form.Email.focus();
document.getElementById("errorBox").innerHTML = "Fusni email";
return false;
}
else if(!emailRegex.test(femail))
{
document.form.Email.focus();
document.getElementById("errorBox").innerHTML = "Fusni email e validimit";
return false;
}
if (freemail == "" )
{
document.form.enterEmail.focus();
document.getElementById("errorBox").innerHTML = "Fusni serish email";
return false;
}
else if(!emailRegex.test(freemail))
{
document.form.enterEmail.focus();
document.getElementById("errorBox").innerHTML = "Fusni serish email e validimit";
return false;
}
if(freemail != femail)
{
document.form.enterEmail.focus();
document.getElementById("errorBox").innerHTML = "Email-et nuk perputhen, futini serish";
return false;
}
if(fpassword == "")
{
document.form.Password.focus();
document.getElementById("errorBox").innerHTML = "Fusni password";
return false;
}
if (fmonth == "")
{
document.form.birthday_month.focus();
document.getElementById("errorBox").innerHTML = "Zgjidhni muajin e lindjes";
return false;
}
if (fday == "")
{
document.form.birthday_day.focus();
document.getElementById("errorBox").innerHTML = "Zgjidhni diten e lindjes";
return false;
}
if (fyear == "")
{
document.form.birthday_year.focus();
document.getElementById("errorBox").innerHTML = "Zgjidhni vitin e lindjes";
return false;
}
if(document.form.radiobutton[0].checked == false && document.form.radiobutton[1].checked == false)
{
document.getElementById("errorBox").innerHTML = "Zgjidhni gjinine";
return false;
}
if (flibri == "")
{
document.form.libri.focus();
document.getElementById("errorBox").innerHTML = "selecto librin";
return false;
}
if (datMarrje == "")
{
document.form.d_marrje.focus();
document.getElementById("errorBox").innerHTML = "selecto daten";
return false;
}
if(fname != '' && lname != '' && femail != '' && freemail != '' && fpassword != '' && fmonth != '' && fday != '' && fyear != ''&& flibri!='' && datMarrje!='')
{
document.getElementById("errorBox").innerHTML = "Forma u krye me sukses ";
}
}
</script>
</head>
<body>
<div id="emptyDiv"></div>
<div id="description"></div>
<!--container fillon-->
<div id="container">
<div id="container_body">
<!--Form fillon-->
<div id="form_emri">
<div class="emrimbiemri">
<form name="form" >
<div id="errorBox"></div>
<input type="text" name="Name" value="" placeholder="Emri" class="input_name" >
<input type="text" name="LastName" value="" placeholder="Mbiemri" class="input_name" >
</div>
<div id="email_form">
<input type="text" name="Email" value="" placeholder=" Email" class="input_email">
</div>
<div id="Re_email_form">
<input type="text" name="enterEmail" value="" placeholder="Rifut Email" class="input_Re_email">
</div>
<div id="password_form">
<input type="password" name="Password" value="" placeholder=" Password" class="input_password">
</div>
<!--te dhenat e ditelindjes fillojne ketu-->
<div>
<h3 class="birthday_title">Ditelindje</h3>
</div>
<div>
<select name="birthday_month" >
<option value="" selected >Muaji</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
</select>
<select name="birthday_day" >
<option value="" selected>Data</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="birthday_year">
<option value="" selected>Viti</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
</select>
</div>
<!--te dhenat e ditelindjes perfundojne ketu-->
<div id="radio_button">
<input type="radio" name="radiobutton" value="Femer">
<label >Femer</label>
<input type="radio" name="radiobutton" value="Mashkull">
<label >Mashkull</label>
</div>
<div>
<p id="sign_user" onClick="Submit()">Sign Up </p>
</div>
<div>
<h3 class="libri_title">Zgjidhni librin</h3>
<select name="libri">
<option value="Keshtjella">Keshtjella-<b>Ismail Kadare</b></option>
<option value="Charls Dikens">A Tale of Two Cities-<b>Charls Dikens</b></option>
<option value="Cao Xueqin">The Dream Of The red Chamber-<b>Cao Xueqin</b></option>
<option value="Rowling">Harry Poter-<b>Rowling</b></option>
</select>
</div>
<div>
<h3 class="d_marrjes">Data e marrjes: </h3><br/>
<input type="date"name="date",id="demo"/>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.toString();
<script>
</div>
</form>
</div>
<!--Forma mbaroi-->
</div>
</div>
<!--container mbaroi-->
</body
</html>Upvotes: 0
Views: 648
Answers (1)
galiarmero
Reputation: 46
There are multiple errors here:
First, your input with id='demo' is incorrect. Attributes (like type, name, and id) should not have commas in between them. Your input tag should appear like this:
<input type="date" name="date" id="demo"/>
Second, this line is wrong:
datMarrje = document.form.d_marrjes.value;
It assumes that your <form name="form"> has a child <input name="d_marrjes"but it doesn't. You should replace it with
datMarrje = document.form.date.value;
After fixing these errors, it worked for me.
Upvotes: 1
Related Questions
- Trying to make login and register form
- Wordpress Custom Registration Form
- Getting following errors buliding registration form using html5 and css.Getting following errors
- step by step registration form
- Student Registration Form Validation in JavaScript
- Javascript/jQuery registration form issues
- Issue with handling a form using javascript
- Javascript: registration form help required
- Javascript HTML Registration
- Can I create registration page in JavaScript?