registration form using javascript
Question
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 , password and 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>
1 answers
solution1
1 2018-01-30 11:07:42
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Registration form using javascript and php
Registration form validation using javascript
Form validation using javascript (Registration Form with formatting)
registration form using Javascript and Php with MySql Database
JavaScript Validation Registration Form
Student Registration Form Validation in JavaScript
Javascript/jQuery registration form issues
Javascript: registration form help required
State validation in a JavaScript registration form
Validating registration for using JavaScript
Related Tags