Today I am going to use JavaScript to do a validation of the registration page, but after an afternoon of verification, the function can be called. When the test pop-up window is added at the beginning of the function, the pop-up window pops up correctly, but the verification function in the function is always unresponsive. Ask for the forum's amnesty, where is the problem, thank you! ! !
I added a test popup statement to the script and it succeeded. But other functions don't respond.
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<link rel="stylesheet" type="text/css" href="css/register.css">
<script type="text/javascript">
window.alert("test");
function checkRegisterINfo(form) {
/*判断姓名格式是否正确*/
var RegisterNameCheck = document.getElementById("nameId").value;
if (RegisterNameCheck = "") {
window.alert("姓名不能为空！");
return false;
} else {
var rightName = /[\u4E00-\u9FA5]{2,16}/;
if (rigntName.test(RegisterNameCheck) == true) {} else {
window.alert("您输入的姓名不正确！");
return false;
}
}
/*判断密码是否规范*/
var RegisterPwdCheck = document.getElementById("pwdId").value;
var rightPwd = /^(\w){6,20}$/;
if (rightPwd.test(RegisterPwdCheck) == false) {
window.alert("密码只能输入6-20个字母、数字、下划线");
return false;
}
/*判断密保问题格式是否正确*/
var RegisterQuestionCheck = document.getElementById("questionId").value;
var rightQuestion = /[\u4E00-\u9FA5]{1,16}/;
if (!rightQuestion.test(RegisterQuestionCheck)) {
window.alert("密保问题支持1-16位汉字！");
return false;
}
/*判断密保答案格式是否正确*/
var RegisterAnswerCheck = document.getElementById("answerId").value;
var rightAnswer = /[\u4E00-\u9FA5]{1,50}/;
if (!rightAnswer.test(RegisterAnswerCheck)) {
window.alert("密保答案支持1-50位汉字！");
return false;
}
}
</script>
</head>
<body>
<div class="main">
<div class="title">
<span>用户注册</span>
</div>
<form name="registerForm" method="post" action="" onsubmit="return checkRegisterINfo(registerForm)">
<!--输入框-->
<div class="input-content">
<div>
<input type="text" autocomplete="off" id="nameId" placeholder="用户名" name="Registerusername" required/>
</div>
<div style="margin-top: 16px">
<input type="password" autocomplete="off" id="pwdId" placeholder="登录密码" name="Registerpassword" required maxlength="32" />
</div>
<div style="margin-top: 16px">
<input type="text" autocomplete="off" id="questionId" placeholder="密保问题" name="Registerquestion" required maxlength="32" />
</div>
<div style="margin-top: 16px">
<input type="text" autocomplete="off" id="answerId" placeholder="密保答案" name="Registeranswer" required maxlength="32" />
</div>
</div>
<!--登入按钮-->
<div style="margin-top: 105px">
<button type="submit" class="enter-btn">登录</button>
</div>
<div class="foor">
<div class="left"><span>忘记密码</span></div>
<div class="right"><span>用户登录</span></div>
</div>
</form>
</div>
</body>
</html>
Related
Here I'm trying to execute the following code but it throws the above error in console log in website page, I am unable to identify the error .
I have coded this webpage in such a way that it should show an error like "enter the user name" and "enter the password" whenever the input boxes are left empty but instead of this it is showing an uncaught type error. Kindly help me to find the solution.
my github code link is:https://github.com/harish-123445/login-form-using-html-css-javascript
function vfun(){
var uname=document.forms["myform"]["uname"].value;
var pword=document.forms["myform"]["pword"].value;
if(uname==null || uname=="" ){
document.getElementById("errorBox").innerHTML =
"enter the user name";
return false;
}
if(pword==null || pword==""){
document.getElementById("errorBox").innerHTML =
"enter the password";
return false;
}
if (uname != '' && pword != '' ){
alert("Login successfully");
}
}
<!DOCTYPE html>
<html >
<head>
<title>sign in form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js.js"></script>
<body>
<div class="box">
<img src="user.png" class="user">
<h1 >LOGIN HERE</h1>
<form class="myform" onsubmit= "return vfun()">
<p>USERNAME </p>
<input type="text" name="uname" placeholder="enter username" >
<p>PASSWORD </p>
<input type="password" name="pword" placeholder="enter password">
<div id="errorBox"></div>
<input type="submit" name="" value="login">
<br><br>
<a href="register.html" >Register for new user</a>
</form>
</div>
</body>
</head>
</html>
I have edited your code. I have called your username and password using getElementById and your two error boxes with different id names and now it is working fine.
function vfun(){
var uname=document.getElementById("name").value;
var psword=document.getElementById("passw").value;
if(uname==null || uname=="" ){
document.getElementById("errorBox2").innerHTML =
"enter the user name";
return false;
}
if(psword==null || psword==""){
document.getElementById("errorBox").innerHTML =
"enter the password";
return false;
}
if (uname != '' && pword != '' ){
alert("Login successfully");
}
}
<!DOCTYPE html>
<html >
<head>
<title>sign in form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js.js"></script>
<body>
<div class="box">
<img src="user.png" class="user">
<h1 >LOGIN HERE</h1>
<form class="myform" onsubmit= "return vfun()">
<p>USERNAME </p>
<input type="text" name="uname" id="name"
placeholder="enter username" >
<div id="errorBox2"></div>
<p>PASSWORD </p>
<input type="password" name="pword" id="passw"
placeholder="enter password">
<div id="errorBox"></div>
<input type="submit" name="" value="login">
<br><br>
<a href="register.html" >Register for new user</a>
</form>
</div>
</body>
</head>
</html>
i am trying to make a phonebook that has an add button when i click it it opens a form and there for now i want to display my name and phonenumber
now when i fillout these 2 fields and click on send it does not display it on the webpage
this is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PhoneBook</title>
<link rel="stylesheet" href="Css/Whole.css">
<script defer src="JavaScript/PU.js"></script>
</head>
<body>
<h1>PhoneBook</h1>
<div class="childContainer">
<div class="buttonsContainer">
<div>
<input type="search" placeholder="search" class="searchBar"></div>
<div class="buttonsRightSide"> <button value="submit" id="addBtn" class="addBtn">+</button>
<button value="submit" id="removeBtn" class="removeBtn">-</button>
<button value="submit" id="saveBtn" class="saveBtn">*</button></div>
</div>
<div class="formContainer">
<form class="addForm" id="addForm">
<h2>Create Contact</h2>
<label for="name">First name*:</label>
<input id="name" type="text" pattern="[A-Z][a-zA-Z]{3,7}" required><br>
<label for="phoneNumber">Phone number*:</label>
<input id="phone" type="number" pattern="[0][5][0-8][ -]?\d{7}" required><br>
<label for="Adress">Address:</label>
<input type="text" id="Address"><br>
<label for="Email">Email:</label>
<input type="email" id="Email"><br>
<label for="Description">Description:</label>
<textarea type="text" id="Description"></textarea><br>
<div class="sendCancelButtons">
<button type="submit" class="submitButton" id="submitButton">Send</button> <button value="submit"
class="cancelOverlay">Cancel</button></div>
</form>
</div>
<div class="outPutContainer">
</div>
</div>
</body>
</html>
and this is my javascript
"use strict";
function showOverlay(showButton, showContainer) { // this whole funciton opens up the overlay
const addButton = document.querySelector("." + showButton);
addButton.addEventListener("click", function addSomthing() {
document.querySelector("." + showContainer).style.display = 'block';
});
}
showOverlay("addBtn", "formContainer");
function cancelOverlay(cancelButton, showContainer) { //this dynamic funciton helps with closing overlays after we are done with the event
const removeOverlay = document.querySelector("." + cancelButton);
removeOverlay.addEventListener("click", function removeSomthing() {
document.querySelector("." + showContainer).style.display = 'none';
});
}
cancelOverlay("cancelOverlay", "formContainer");
function inputAndOutput() {
cancelOverlay("submitButton", "formContainer"); //this function helps me close the form window after i click on send
const form = document.getElementById("addForm");
form.addEventListener("submit", (e) => { //this is a submit event when the send button is pressed it makes an object and with the help of JSON it puts it into an array
let formOutput = {
name: document.getElementById("name").value,
phoneNumber: document.getElementById("phone").value
} //end of form
localStorage.setItem("formOutput", JSON.stringify(formOutput)); //array of obj
console.log(localStorage.getItem('formOutput')); //testing
displayOutput();
e.preventDefault(); //prevent the page to reload
} //end of Event
, );
}
inputAndOutput();
function displayOutput() {
if (localStorage.getItem('formOutput')) {
let {
name,
phoneNumber
} = JSON.parse(localStorage.getItem('formOutput'));
const output = document.getElementById("outPutContainer");
output.innerHTML = `
<ul>
<li>${name} </li>
<li>${phoneNumber} </li>
</ul>
`
}
}
any hints and suggestions are welcome and thanks in advance <3
Your JS code throws the error Uncaught TypeError: output is null.
The variable output gets defined here:
const output = document.getElementById("outPutContainer");
however, the container you want to get by id only has a class:
<div class="outPutContainer">
Change class="outPutContainer" to id="outPutContainer".
(Note: I found this solution using the Console tab of the Developer Tools of my browser. Press CTL+SHIFT+C in e.g. Firefox or Chrome and follow the errors/warnings. This is usually the fastest way to debug your scripts.)
I coded an HTML form where I tried to validate it using javascript, However, the validation doesn't work. It should work on click of submit button. Everything looks fine! could not find the error! Please Help.
Below is the code for the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Term Deposit Interest Calculator</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script>
function validateform(){
var amount=document.myform.amount.value;
var years=document.myform.years.value;
var interst= document.myform.interst.value;
if (amount==null || amount==""){
alert("Amount can't be blank");
return false;
}else if (years==null || years==""){
alert("Years can't be blank");
return false;
}else if (interest==null || interest==""){
alert("Interest can't be blank");
return false;
}
}
</script>
</head>
<body>
<div class="card">
<h3>Term Deposit Interest Calculator</h3><br>
<form name = "myform" method="post"onsubmit="return validateform()">
<input type="text" name="amount" placeholder="Deposit Amount"><span id="num1"></span>
<input type="text" name="years" placeholder="Number Of Years"><span id="num2"></span>
<input type="text" name="interest" placeholder="Yearly Interst Rate"><span id="num3"></span>
<input type="submit" name="submit" class="my submit" value="Total Amount">
</form>
<div class="result">
</div>
</div>
</body>
</html>
<?php
if (!isset($amount7032)) { $amount7032 = ''; }
if (!isset($interest7032)) { $interest7032 = ''; }
if (!isset($years7032)) { $years7032 = ''; }
?>
You have written wrong form element name at below line
var interst= document.myform.interst.value;
it should be
var interest= document.myform.interest.value;
Basically because javascript was not able to find the form element and it was failing due to that.
I tried below code and its working:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Term Deposit Interest Calculator</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script>
function validateform(){
var amount=document.myform.amount.value;
var years=document.myform.years.value;
var interest= document.myform.interest.value;
if (amount==null || amount==""){
alert("Amount can't be blank");
return false;
}else if (years==null || years==""){
alert("Years can't be blank");
return false;
}else if (interest==null || interest==""){
alert("Interest can't be blank");
return false;
}
}
</script>
</head>
<body>
<div class="card">
<h3>Term Deposit Interest Calculator</h3><br>
<form name="myform" method="post" onsubmit="return validateform()">
<input type="text" name="amount" placeholder="Deposit Amount"><span id="num1"></span>
<input type="text" name="years" placeholder="Number Of Years"><span id="num2"></span>
<input type="text" name="interest" placeholder="Yearly Interst Rate"><span id="num3"></span>
<input type="submit" name="submit" class="my submit" value="Total Amount">
</form>
<div class="result">
</div>
</div>
</body>
</html>
I am using JavaScript in JSP page and trying to display errors in all fields if no value is provided in the input field.. but for some reason error message is displayed only for the the first field which is field label.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Test</title>
</head>
<body>
<div class="container">
<br>
<h1 class="text-success text-center">Test Test</h1>
<div class="col-lg-8 m-auto d block">
<form action="#" onsubmit="return validation()" class="bg-light">
<div class="form-group">
<label>FieldLabel:</label> <input type="text" name="fieldLabel"
class="form-control" id="fieldLabel"></input> <span
id="fieldLabelError" class="text-danger"></span>
</div>
<div class="form-group">
<label>Version:</label> <input type="text" name="version"
class="form-control" id="version"></input> <span id="versionError"
class="text-danger"></span>
</div>
<input id="submit" name="submit" type="submit" value="Submit"
onclick="validation()">
</form>
</div>
</div>
<script type="text/javascript">
function validation() {
var fieldLabel = document.getElementById("fieldLabel").value;
var version = document.getElementById("version").value;
if (fieldLabel == "") {
document.getElementById("fieldLabelError").innerHTML = "**Please enter Field label";
return false;
}
if (version == "") {
document.getElementById("versionError").innerHTML = "**Please enter version";
return false;
}
return true;
}
</script>
</body>
</html>
Because in the validation() function when fieldLabel is empty then you will return false,so the version have no chance to execute,change your code as below:
function validation() {
var fieldLabel = document.getElementById("fieldLabel").value;
var version = document.getElementById("version").value;
var isValid = true;
if (fieldLabel == "") {
document.getElementById("fieldLabelError").innerHTML = "**Please enter Field label";
isValid = false;//use a variable to set the result
}
if (version == "") {
document.getElementById("versionError").innerHTML = "**Please enter version";
isValid = false;
}
return isValid;
}
I have the following lines of js
var select_container = "container_"+parts[2];
var get_container = document.getElementById(select_container);
The function this is part of is failing and when I look in firebug it returns get_container as undefined. I have checked select_container is the correct value and that there isn't a duplicate id on page.
This is called by an onclick event so I can't see waiting for the page to load being an issue (the result is same no matter how long I wait).
revelent html example:
<div id="container_0">
I'm stumped!
edit
This is all the Javascript from the parent functions
/*detects links in the form editor and uses them to adjust the layout*/
window.onload = function () {
clickDetection();
} /*detect clicks on interesting links*/
function clickDetection() {
var canvas = document.getElementById("content");
var dumbLinks = canvas.getElementsByTagName("a");
for (var i = 0; i < dumbLinks.length; i++) {
dumbLinks[i].onclick = function () {
clickRoute(this);
return false
};
}
} /*reroute click behaviour to correct function*/
function clickRoute(link_object) {
var linkId = link_object.getAttribute("id");
var linkParts = linkId.split("_");
if (linkParts[1] == "delete") {
delete_route(linkParts);
} else if (linkParts[1] == "new") {
new_route(linkParts);
}
}
function delete_route(parts) {
alert(parts);
if (parts[0] == "field") {
var select_container = "container_" + parts[2];
var get_container = document.getElementById(select_container);
document.removeChild(get_container);
} else if (parts[0] == "option") {
alert("delete a option");
}
}
full (typical) html (please note repeating sections have been cut for length and other details changed for secuity):
<!DOCTYPE HTML>
<html>
<head>
<!-- determines header content -->
<meta charset="utf-8" />
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<script type="text/javascript" src="some.js"></script>
<title>Title of the document</title>
</head>
<body>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav linke</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div id="content">
<h1>screen name</h1>
<form method="post" action="#this">
<label for="summary">Select an item to edit:<br></label>
<select name="summary" id="summary">
<option value="generic">generic</option>
<option value="updated">updated</option>
</select>
<input type="submit" name="summary_select" value="Select">
</form>
<h2>screen name</h2>
<div id="container_7">
<form method="post" action="#this">
<fieldset><legend>existing segment</legend>
<p><a id="field_delete_7" href="#">Delete field</a></p>
<label for="name_7">Field Name</label><input type=text id="name_7" name="name" value="Colour"><br>
<label for="type_7">Data type expected</label>
<select name="type" id="type_7">
<option value="name" >Name</option>
<option value="email" >Email Address</option>
<!-- cut for length -->
</select>
<p>Some text</p>
<label for="option_7_0">Option Value</label><input type=text id="option_7_0" name="option_7_0" value="Red">
<a id="option_delete_7_0" href="#">Delete option</a><br>
<label for="option_7_1">Option Value</label><input type=text id="option_7_1" name="option_7_1" value="Green">
<a id="option_delete_7_1" href="#">Delete option</a><br>
<label for="option_7_2">Option Value</label><input type=text id="option_7_2" name="option_7_2" value="Blue">
<a id="option_delete_7_2" href="#">Delete option</a><br>
<a id="option_new_7" href="#">Add new option</a>
<input type="submit" name="detail" value="Finish"></fieldset></form></div>
<p><a id="field_new" href="#">Add new field</a></p>
</div>
<!-- determines footer content -->
footer content
</body>
</html>
Change this:
document.removeChild(get_container);
to this:
get_container.parentNode.removeChild(get_container);
or if the containers are a direct descendant of body, then you could do this:
document.body.removeChild(get_container);