Develop Reference

Uncaught TypeError: Cannot read property 'checked' of undefined, Checkboxes

I want to validate my checkboxes to make sure that the user checked at least one, however I keep getting this error:
Uncaught TypeError: Cannot read property 'checked' of undefined.
Here is part of the HTML:
<form name="userSurvey" onsubmit="return validAll()" action="mailto:suvery#worldbook.com" method="post">
Name (Required): <input type="text" name="userName" id="userName" required=""><br> E-Mail (Required): <input type="text" name="mail" id="mail" required=""><br> Phone (Required): <input type="text" name="phone" id="phone" required="" onchange="validNumber()"><br>
<br>
<p>Please choose your favourite types of books.(check all that apply)</p>
<input type="checkbox" name="books" value="Science Fiction">Science Fiction
<input type="checkbox" name="books" value="Travel Guide">Travel Guide
<input type="checkbox" name="books" value="Short Story Collection">Short Story Collection
<input type="checkbox" name="books" value="Other">Other <br>
<textarea></textarea><br>
<input type="submit" name="submit">
<input type="reset" name="reset">
</form>
and part of the JavaScript for the checkboxes:
function validChoice()
{
var bookChoice = document.userSurvey.books.value;
var x= "";
for (i=0;i< 4;i++)
{
if (document.userSurvey['bookChoice'+i].checked)
{
bookChoice = document.userSurvey['bookChoice'+i].value;
x = x +"\n"+ bookChoice;
}
}
if (bookChoice == "")
{
window.alert("You must select at least one book category.");
return false;
}
else
{
var userName = document.userSurvey.userName.value;
var eMail = document.userSurvey.email.value;
var phoneNo = document.userSurvey.phone.value;
return true;
}
}
I am currently learning in JavaScript therefore I would prefer help in JavaScript only.
Full Code on JSFiddle:
https://jsfiddle.net/7qh5segc/

You missed some tag names and missspell them in js function:
<h1>User Survey</h1>
<h2><strong>User Information</strong></h2>
<p>Please enter your details below</p>
<br>
<form name="userSurvey" onsubmit="return validAll()" action="mailto:suvery#worldbook.com" method="post">
Name (Required):
<input type="text" name="userName" id="userName" required="">
<br> E-Mail (Required):
<input type="text" name="email" id="email" required="">
<br> Phone (Required):
<input type="text" name="phone" id="phone" required="" onchange="validNumber()">
<br>
<br>
<p>Please choose your favourite types of books.(check all that apply)</p>
<input type="checkbox" name="books" value="Science Fiction">Science Fiction
<input type="checkbox" name="books" value="Travel Guide">Travel Guide
<input type="checkbox" name="books" value="Short Story Collection">Short Story Collection
<input type="checkbox" name="books" value="Other">Other
<br>
<textarea></textarea>
<br>
<input type="submit" name="submit">
<input type="reset" name="reset">
</form>
and js code goes like this:
function validName() {
var name = document.userSurvey.userName.value;
if (!/^[a-zA-Z]*$/g.test(name)) {
alert("Please enter letters a - z only");
document.userSurvey.userName.focus();
return false;
} else {
return true;
}
}
function validNumber() {
var theNumbersOnly = "";
var theChar = "";
var theInput = document.userSurvey.phone.value;
for (i = 0; i < theInput.length; i++) {
theChar = theInput.substring(i, i + 1);
if (theChar >= "0" && theChar <= "9") {
theNumbersOnly = "" + theNumbersOnly + theChar;
}
}
if (theNumbersOnly.length < 10) {
alert("You must enter 10 numbers.");
document.userSurvey.phone.focus();
} else {
var areacode = theNumbersOnly.substring(0, 3);
var exchange = theNumbersOnly.substring(3, 6);
var extension = theNumbersOnly.substring(6, 10);
var newNumber = "(" + areacode + ") ";
newNumber += exchange + "-" + extension;
document.userSurvey.phone.value = newNumber;
return true;
}
}
function validEmail() {
var email = document.userSurvey.email.value;
var atLoc = email.indexOf("#", 1);
var dotLoc = email.indexOf(".", atLoc + 2);
var len = email.length;
if (atLoc > 0 && dotLoc > 0 && len > dotLoc + 2) {
return true;
} else {
alert("Please enter your e-mail address properly.");
return false;
}
}
function validChoice() {
//var bookChoice = document.userSurvey.books.value;
var bookChoice;
var x = "";
for (var i = 0; i < 4; i++) {
if (document.userSurvey.books[i].checked) {
console.log(document.userSurvey);
bookChoice = document.userSurvey.books[i].value;
x = x + "\n" + bookChoice;
}
}
if (bookChoice == "") {
window.alert("You must select at least one book category.");
return false;
} else {
var userName = document.userSurvey.userName.value;
var eMail = document.userSurvey.email.value;
var phoneNo = document.userSurvey.phone.value;
console.log(userName);
console.log(eMail);
console.log(phoneNo);
return true;
}
}
function validAll() {
if ((validName() == true) && (validEmail() == true) && (validNumber() == true) && (validChoice() == true)) {
return true;
} else {
return false;
}
}
You missed email tag name too. regards

You can fix the checkbox issue using the following code. A sensible way to get all the checkboxes in this case is using their shared "name" attribute. There are other ways if your structure was different - e.g. using a CSS class, or adding some other custom attribute to the elements.
function validChoice() {
var bookChoices = "";
var checkboxes = document.getElementsByName("books"); //get all elements named "books" into an array
for (i = 0; i < checkboxes.length; i++) { //loop the array
if (checkboxes[i].checked) { //if the array item at this index is checked, then add it to the list
bookChoices += "\n" + checkboxes[i].value;
}
}
if (bookChoices == "") {
window.alert("You must select at least one book category.");
return false;
} else {
alert(bookChoices); //just for testing
return true;
}
}
See https://jsfiddle.net/7qh5segc/3/ for a demo using the changed validChoice() function.

Java form validation For my Website [duplicate]

This question already has answers here:
How can I validate an email address in JavaScript?
(79 answers)
Closed 5 years ago.
I have created an alert box which will output the details from the form I am now wondering how I start the Java validation part so that if the form is filled in
correctly an alert box with the form details will show however if it is wrong instruct the user to fill in the invalid boxes.
HTML
<form id="foo" onsubmit="formAlert(); return false;" method="POST">
<p><label for="first_name">First Name<label><input type="text" id="first_name" value="" /></p>
<p><label for="last_name">Last Name<label><input type="text" id="last_name" value="" /></p>
<p><label for="Phone_num">Phone Number<label><input type="number" id="phone_num" value="" /></p>
<p><input type="submit" value="click me" onclick=""/></p>
</form>
Java Script
function formAlert() {
alert_string = '';
var userName = document.getElementById('first_name').value;
var userLastName = document.getElementById('last_name').value;
var phoneno = document.getElementById('phone_num').value;
if(userName === "" || userName === null){
alert("Please enter name");
}
if(userLastName === "" || userLastName === null){
alert("Please enter lastname");
}
else if(phoneno === "/^(?([0-9]{3}))?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;" || phoneno === null){
alert("Please enter Phone number");
}
else{
alert_string += userName + " ";
alert_string += userLastName;
alert_string += phoneno;
alert(alert_string);
}
}

Here's a quick and simple solution. Add this to your javascript code. Hope it helps!
function validatePhone(inputtxt) {
var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
return phoneno.test(inputtxt)
}
function formAlert() {
alert_string = '';
var userName = document.getElementById('first_name').value;
var userLastName = document.getElementById('last_name').value;
var phoneno = document.getElementById('phone_num').value;
if(userName === "" || userName === null){
alert("Please enter name");
}
if(userLastName === "" || userLastName === null){
alert("Please enter lastname");
}
else if(!validatePhone(phoneno)){ alert("Please enter 10 digits for phone number"); }
else{
alert_string += userName + " ";
alert_string += userLastName + " ";
alert_string += phoneno;
alert(alert_string);
}
}
To check for email simple use required. Something like this:
<input type="email" name="email" required>
There are many ways to validate phone number. Here's a good example: Credit goes to: https://stackoverflow.com/a/18376246/4084160

There is other way to do that. it is a good approach if you have many inputs
<html>
<style>
.required
{
border: 1px solid #F00;
padding: 2px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="foo" onsubmit="formAlert(); return false;" method="POST">
<p><label for="first_name">First Name<label><input type="text" id="first_name" value="" /></p>
<p><label for="last_name">Last Name<label><input type="text" id="last_name" value="" /></p>
<p><input type="submit" value="click me" onclick=""/></p>
</form>
<div id="msgRequired" style="display: none;">
<p>required Field!</p>
</div>
<script>
function formAlert() {
alert_string = '';
var cont = 0;
$("#foo input").not(':hidden').each(function () {
if ($(this).val() == "") {
$(this).addClass("required");
cont++;
}
else
{
$(this).removeClass("required");
}
});
if(cont == 0)
{
alert_string = alert_string + document.getElementById('first_name').value;
alert_string = alert_string + ' ';
alert_string = alert_string + document.getElementById('last_name').value;
alert(alert_string);
$("#msgRequired").hide();
}
else
{
$("#msgRequired").show();
}
}
</script>
</html>

how to hide errorbox validation in java script

This code below is working but I want some modification in this code.
When user is not filling the box it is displaying error box that part is working but after filling it should disappear. So please anyone help me to solve the issue.
I have post the code here including html and java script so just copy and run it it will work and try to resolve my issue.
<html>
<head>
<script type="text/javascript">
function validate()
{
var fname = document.form.Name.value;
var lname = document.form.Lame.value;
var same = document.form.Same.value;
if( fname == "" )
{
document.form.Name.focus() ;
document.getElementById("errorBox1").innerHTML = "enter the first name";
return false;
}
if( lname == "" )
{
document.form.Lame.focus() ;
document.getElementById("errorBox2").innerHTML = "enter the last name";
return false;
}
if( same == "" )
{
document.form.Same.focus() ;
document.getElementById("errorBox3").innerHTML = "enter the Same name";
return false;
}
}
</script>
</head>
<body>
<form name="form" >
SSS :<input type="text" name="Name" value="" class="input_name" ><div id="errorBox1"> </div>
<br>
SSmjhjk :<input type="text" name="Lame" value="" class="input_name" ><div id = "errorBox2"></div>
<br>
nngb :<input type="text" name="Same" value="" class="input_name" ><div id = "errorBox3"></div>
<input type=button onClick="validate()" value=check>
</form>

In my first notice, You have the syntax error in your script. In your last condition you have written the code like if else if( same == "" ). This is wrong.
If you want check and display error for all the textbox at the same time, then you need to remove the return property from the script. Update your script like below.
function validate()
{
var fname = document.form.Name.value;
var lname = document.form.Lame.value;
var same = document.form.Same.value;
document.getElementById("errorBox1").innerHTML ="";
document.getElementById("errorBox2").innerHTML ="";
document.getElementById("errorBox3").innerHTML ="";
if( fname == "" )
{
document.getElementById("errorBox1").innerHTML = "enter the first name";
}
if( lname == "" )
{
document.getElementById("errorBox2").innerHTML = "enter the last name";
}
if( same == "" )
{
document.getElementById("errorBox3").innerHTML = "enter the Same name";
}
}
HTML
<form name="form" >
SSS :<input type="text" name="Name" value="" class="input_name" onkeyup="validate();" /><div id="errorBox1"> </div>
<br>
SSmjhjk :<input type="text" name="Lame" onkeyup="validate();" value="" class="input_name" /><div id = "errorBox2"></div>
<br>
nngb :<input type="text" name="Same" onkeyup="validate();" value="" class="input_name" /><div id = "errorBox3"></div>
<input type="button" onclick="validate();" value="check" />
</form>
Fiddle Demo

Try this , this might work for you
function validate() {
var fname = document.form.Name.value;
var lname = document.form.Lame.value;
var same = document.form.Same.value;
if (fname == "") {
document.form.Name.focus();
document.getElementById("errorBox1").innerHTML = "enter the first name";
return false;
} else {
document.getElementById("errorBox1").innerHTML = "";
}
if (lname == "") {
document.form.Lame.focus();
document.getElementById("errorBox2").innerHTML = "enter the last name";
return false;
} else {
document.getElementById("errorBox2").innerHTML = "";
}
if (same == ""){
document.form.Same.focus();
document.getElementById("errorBox3").innerHTML = "enter the Same name";
return false;
} else {
document.getElementById("errorBox3").innerHTML = "";
}
}
use input type like this
<input type="text" id="fname" onkeyup="validate()">
This will help you

If you want to use javascript only, you can hide the error div:
document.getElementById("errorBox1").style.display = 'none';

Array value not accesible in another function in javascript

I am developing a simple address book. I am using four different arrays to store name,phone no ,address and email of user.When I am calling add() method its adding values to these arrays,but when I am calling display the details its showing address book empty and all these arrays empty. Thanks in advance please help..
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Address Book</title>
<link rel="stylesheet" type="text/css" href="addressBook.css" />
<script src="jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
$('#add').click(function () {
add();
});
$('#delete').click(function () {
remove_con();
});
$('#view').click(function () {
display();
});
});
</script>
<script type="text/javascript">
var BOOK = new Array();
var BOOKNO = new Array();
var ADDR = new Array();
var EMAIL = new Array();
function add() {
//Take values from text fields
var conname = document.getElementById('userNam').value;
var lenname = BOOK.length;
var x = BOOK.indexOf(conname);
var conno = document.getElementById('userNo').value;
var lenno = BOOKNO.length;
var y = BOOKNO.indexOf(conno);
var conaddr = document.getElementById('userAdd').value;
var lenaddr = ADDR.length;
var z = ADDR.indexOf(conaddr);
var conemail = document.getElementById('userEmail').value;
var lenemail = EMAIL.length;
var w = EMAIL.indexOf(conemail);
//Validations
if (conname.length == 0) {
alert("Name field cannot be blank");
return;
}
else if (conno.length == 0) {
alert("Phone number field cannot be Left blank");
return;
}
else if (conno.length != 10) {
alert("Enter a Valid Phone Number");
return;
}
else if (conaddr.length == 0) {
alert("Address field cannot be blank");
return;
}
else if (conemail.length == 0) {
alert("Email field cannot be blank");
return;
}
//RegEX
alphaExp = /^[a-zA-Z]+$/;
numExp = /^[0-9]+$/;
betaExp = /^\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (!conname.match(alphaExp)) {
alert("Please enter alphabets only");
return;
}
else if (!conno.match(numExp)) {
alert("Please enter numerals only");
return;
}
else if (!conemail.match(betaExp)) {
alert("Please enter a valid email");
return;
}
else if (y >= 0) {
alert("Phone number already Present");
return;
}
else {
BOOK[lenname] = conname;
BOOKNO[lenno] = conno;
ADDR[lenaddr] = conaddr;
EMAIL[lenemail] = conemail;
var l = BOOK.length;
alert("Contact " + conname + " Added Sucesfully!!!!" +l);
return BOOK,BOOKNO,ADDR,EMAIL;
}
}
function display() {
//document.getElementById('hiddenDiv').style.display = "block";
BOOK = BOOK.sort();
var l = BOOK.length;
alert(l);
var view = "";
if (l == 0) {
document.getElementById('hiddenDiv').innerHTML = "ADDRESS BOOK EMPTY!!!";
}
if (l >= 1) {
view = view + "<table border=1px><tr><td><B>NAME</B></td><td><B>PHONE NUMBER</B></td><td><B>ADDRESS</B></td><td><B>EMAIL</B></td>";
for (var i = 0; i < BOOK.length; i++) {
view = view + "<tr><td>" + BOOK[i] + "</td><td>" + BOOKNO[i] + "</td><td>" + ADDR[i] + "</td><td>" + EMAIL[i] + "</td></tr>";
}
document.getElementById('hiddenDiv').innerHTML = view + "</table>";
}
}
function remove_con() {
var remname = prompt("Enter the name to be removed");
var remlen = BOOK.LENGTH;
/*var remnam=document.getElementById('name').value;
var remno=document.getElementById('phno').value;*/
var z = BOOK.indexOf(remname);
var z1 = z;
var z2 = z;
var z3 = z;
if (remlen == 0) {
alert("ADDRESS BOOK IS EMPTY");
return;
}
if (z >= 0) {
BOOK.splice(z, 1);
BOOKNO.splice(z1, 1);
ADDR.splice(z2, 1);
EMAIL.splice(z3, 1);
alert("Contact deleted");
}
if (z == -1) {
alert("Contact not present");
}
}
function searchcon() {
var lenn1 = BOOK.length;
if (lenn1 == 0) {
alert("ADDRESS BOOK EMPTY");
return;
}
var coname = prompt("Enter name");
var ind = BOOK.indexOf(coname);
if (ind >= 0) {
alert("contact found");
return;
}
else {
alert("Contact not present in address book");
}
}
</script>
</head>
<body>
<div id="mainDiv">
<header id="startHeader">
<p id="headerPara">Welcome to Address Book</p>
</header>
<div id="midDiv">
<form id="submissionForm">
<div class="entryDiv">
<p class="inputType">Name:</p>
<input id="userNam" type="text" class="buttonsClass" placeholder="Enter Your Name" required="" />
</div>
<div class="entryDiv">
<p class="inputType">Number:</p>
<input id="userNo" type="text" class="buttonsClass" placeholder="Enter Your Number" required="" />
</div>
<div class="entryDiv">
<p class="inputType">Address:</p>
<input id="userAdd" type="text" class="buttonsClass" placeholder="Enter Your Address" required="" />
</div>
<div class="entryDiv">
<p class="inputType">Email:</p>
<input id="userEmail" type="email" class="buttonsClass" placeholder="Enter Your Email" required="" />
</div>
<div id="Buttons">
<input id="reset" type="reset" value="Reset" />
<input id="delete" type="button" value="Delete Contact" />
<input id="view" type="button" value="View Book" />
<input id="add" type="submit" value="AddToContacts" />
</div>
</form>
<div id="hiddenDiv">
</div>
</div>
</div>
</body>
</html>

Change add button's type "submit" to "button" then remove return statement from add function as it is not needed.
This code has many issues.
You don't need four array to store address detail. you can make one array that can have objects containing the address information.eg.
var Address=function(name,address,email,mobile){
this.name=name;
this.address=address||"not available";
this.email=email||"not available";
this.mobile=mobile;
}
var AddressBook=new Array();
//Adding data in address book
AddressBook.push(new Address("jhon","baker street","a#in.com","049372497"))
You can use jquery to get value of element instead of pure javascript. eg.
var conname = document.getElementById('userNam').value;
//instead of this use jquery
var conname=$("#userNam").val(); // recommended approach
There is no need to calculate array length everywhere.To check duplicate mobile number you can write a function.
there are many other improvement you can have in code. for more examples go through Jquery site and Github public repositories.
Fiddle Demo

Change the <input id="add" type="submit" value="AddToContacts" /> to type="button". type="submit" will refresh the page to form's action and will reset all variables including BOOK.

JavaScript hiding plain text similar to password

I am trying to hide/show the plain text of a hashing function, I have been able to hide the input field but i have not been able to hide/show the plain text, the webpage has a input field and under that is the text that i am typing, then there is the hashed text, i am trying to replace the plain text with bullets.
I tried hiding it by counting the number of characters in the field and then repeating the bullet that many times. but now the page does not function at all.
<!DOCTYPE html>
<html>
<body>
<input
name="show password"
type="checkbox"
checked="checked"
onclick="toggleType();" />
<input
size="80"
input type="text"
rows="7"
id="edValue"
type="text"
onKeyPress="edValueKeyPress()
"onKeyUp="edValueKeyPress()">
<p id="string">Original text: </p>
<p id="lblValue">The SHA256 hash is: </p>
<script type="text/javascript" src="sha256.js">
</script>
<script type="text/javascript">
function edValueKeyPress()
{
var edValue = document.getElementById("edValue");
var s = edValue.value;
var lblValue = document.getElementById("lblValue");
lblValue.innerText = "The SHA256 hash is: "+sha256_digest(s);
var TheText = document.getElementById("string");
TheText.innerText = "Original text: "+s;
}
function toggleType() {
var obj = document.getElementById('edValue');
if (obj.type == 'password') {
obj.type = 'text';
} else {
obj.type = 'password';
repeat();
}
}
function repeat() {
var length = this.value.length;
var count = document.getElementById("edValue");
String.prototype.repeat = function(n) {
return new Array(1 + n).join(this);
var TheText = document.getElementById("string");
TheText.innerText = "*".repeat(count);
}
</script>
</body>
</html>

Just use a regex:
w/ jQuery:
$('YOURELEMENT').html($('div').html().replace(/./g, '*'));
without:
var text = document.getElementById('YOURELEMENT').innerText;
document.getElementById('string').innerHTML = text.replace(/./g, '*')

To toggle :
Html input
<input
name="show password"
type="checkbox"
checked="checked"
onclick="toggleType();" />
<input id="password" type="password" />
The javascript
function toggleType(){
var inputEl = document.getElementById('password');
if(inputEl.type != "text"){
inputEl.type = "text";
}else{
inputEl.type = "password";
}
}
Working example: http://jsfiddle.net/3MRAX/1/

Sorry about this, OP, but I tried :( This is as far as I got.
Javascript
function edValueKeyPress()
{
var edValue = document.getElementById("edValue");
var s = edValue.value;
var lblValue = document.getElementById("lblValue");
var hashes = s.hashCode;
lblValue.innerHTML = "The SHA256 hash is: " + hashes;
var text = document.getElementById("string");
text.innerHTML = "Original text: " + s;
}
function toggleType() {
var obj = document.getElementById('edValue');
if (obj.type == 'password') {
obj.type = 'text';
} else if(obj.type == 'text'){
obj.type = 'password';
}
}
HTML
<input
name="show password"
type="checkbox"
checked="checked"
onclick="toggleType();" />
<input
size="80"
type="text"
rows="7"
id="edValue"
type="text"
onkeyup="edValueKeyPress();">
<p id="string">Original text: </p>
<p id="lblValue">The SHA256 hash is: </p>