Javascript 如何在文本框旁边显示错误消息 如果文本框中没有写入任何文本，我将尝试在文本框旁边显示不同的文本。 以下是我编写的代码，但它不起作用： var span=document.getElementById（newId）； 如果（跨度）{ span.firstChild.value=msg；//更新 }否则{ document.getElementById（'firstName'）。值='请输入名字'； document.getElementById（'lastName'）。值='请输入名字'； 我怎样才能解决这个问题？ ''' 登记表 登记
所有字段都是必填字段 名字 姓 电子邮件地址 电话号码的格式为XXX-XXX-XXXX或XXX-XXX-XXXX或xxxxxxxxx。 城市 陈述 选择一个状态 阿拉巴马州 阿拉斯加州 亚利桑那州 阿肯色州 加利福尼亚 科罗拉多州 邮政编码 不管条款是什么，我都同意。 ''' **这是javascript** //-errorMessages.js //此脚本定义用于添加和删除错误消息的函数。 //此函数用于添加错误消息。 //它有两个参数：表单元素ID和消息。 函数添加错误消息（id，msg）{ "严格使用",； //获取表单元素引用： var elem=document.getElementById（id）； var FirstName=document.getElementById（“FirstName”）.value； var LastName=document.getElementById（“LastName”）.value； var email=document.getElementById（“email”）.value； var phone=document.getElementById（“phone”）.value； var city=document.getElementById（“城市”）.value； var state=document.getElementById（“state”）.value； var zip=document.getElementById（“zip”）.value； //定义新范围的ID值： var newId=id+“错误”； //检查跨度是否存在： var span=document.getElementById（newId）； 如果（跨度）{ span.firstChild.value=msg；//更新 }否则{ document.getElementById（'firstName'）。值='请输入名字'； document.getElementById（'lastName'）。值='请输入名字'； //创建新的。 } //创建跨度： span=document.createElement（'span'）； span.id=newId； span.className='错误' appendChild（document.createTextNode（msg））； //将跨度添加到父级： 元素parentNode.appendChild（span）； elem.previousSibling.className='error'； }//主IF-ELSE结束。 }//addErrorMessage（）函数的结尾。 //此函数用于删除错误消息。 //它有一个参数：表单元素ID。 函数removeErrorMessage（id）{ "严格使用",； //获取对范围的引用： var span=document.getElementById（id+'Error'）； 如果（跨度）{ //从标签中删除类： span.previousSibling.previousSibling.className=null； //移除跨度： parentNode.removeChild（span）； }//如果结束。 }//removeErrorMessage（）函数的结尾 这就是这些代码。它会显示一些问题，旁边有一个容器可以输入。我需要有文本显示（请输入您的名字，请输入您的姓氏，…）旁边的容器，如果我没有输入任何文本在容器中点击提交Javascript 如何在文本框旁边显示错误消息 如果文本框中没有写入任何文本，我将尝试在文本框旁边显示不同的文本。 以下是我编写的代码，但它不起作用： var span=document.getElementById（newId）； 如果（跨度）{ span.firstChild.value=msg；//更新 }否则{ document.getElementById（'firstName'）。值='请输入名字'； document.getElementById（'lastName'）。值='请输入名字'； 我怎样才能解决这个问题？ ''' 登记表 登记,javascript,Javascript,所有字段都是必填字段 名字 姓 电子邮件地址 电话号码的格式为XXX-XXX-XXXX或XXX-XXX-XXXX或xxxxxxxxx。 城市 陈述 选择一个状态 阿拉巴马州 阿拉斯加州 亚利桑那州 阿肯色州 加利福尼亚 科罗拉多州 邮政编码 不管条款是什么，我都同意。 ''' **这是javascript** //-errorMessages.js //此脚本定义用于添加和删除错误消息的函数。 //此函数用于添加错误消息。 //它有两个参数：表单元素ID和消息。 函数添加错误消息（id，msg）
我尝试了一些方法，但不知道需要做哪一部分。我也不明白斯潘在这方面做了什么。但是，如果您谈论表单验证，您可以在这里找到答案： 否则，如前所述，占位符是否不起作用
如果您确实希望在文本框旁边显示文本，则需要将文本附加到包含文本框的外部div中，并使用样式将它们并排放置，例如float或position哪个元素对应于您所称的文本框？类型为
文本的输入
？另外，你不能用占位符来代替你在那里试图做的事情吗？现在还不清楚问题是什么——你能提供更多的细节吗？不能使用占位符。我将在下面发布html和javascript，以便更容易理解。是的，我可能能够使用验证，但大部分代码是由我的讲师给出的。我担心如果我更改代码，我会得到与他期望的不同的结果
I'm trying to show different text beside the textbox if no text is written in the textbox.
Here's the code I wrote but it's not working:
var span = document.getElementById(newId);
if (span) {
span.firstChild.value = msg; // Update
} else {
document.getElementById('firstName').value = 'please enter first name';
document.getElementById('lastName').value = 'please enter first name';
How can I fix this?
'''
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Registration Form</title>
<link rel="stylesheet" href="css/newform.css">
</head>
<body>
<!-- register.html -->
<form action="#" method="post" id="theForm">
<fieldset><legend>Register</legend>
<p>All fields are required.</p>
<div class="two"><label for="firstName">First Name</label><input type="text" name="firstName" id="firstName" required></div>
<div class="two"><label for="lastName">Last Name</label><input type="text" name="lastName" id="lastName" required></div>
<div class="two"><label for="email">Email Address</label><input type="email" name="email" id="email" required></div>
<div class="two"><label for="phone">Phone Number<span class="tooltip">In the format XXX XXX XXXX or XXX-XXX-XXXX or XXXXXXXXXX.</span></label><input type="text" name="phone" id="phone" required></div>
<div class="two"><label for="city">City</label><input type="text" name="city" id="city" required></div>
<div class="two"><label for="state">State</label><select name="state" id="state">
<option value="">Select a State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
</select></div>
<div class="two"><label for="zip">Zip Code</label><input type="text" name="zip" id="zip" required></div>
<div class="one"><input type="checkbox" name="terms" id="terms" required> I agree to the terms, whatever they are.</div>
<div class="one"><input type="submit" value="Register" id="submit"></div>
</fieldset>
</form>
<script src="js/utilities.js"></script>
<script src="js/errorMessages.js"></script>
<script src="js/register.js"></script>
</body>
</html>
'''
**and this is the javascript**
// - errorMessages.js
// This script defines functions for adding and removing error messages.
// This function adds the error message.
// It takes two arguments: the form element ID and the message.
function addErrorMessage(id, msg) {
'use strict';
// Get the form element reference:
var elem = document.getElementById(id);
var FirstName = document.getElementById("firstName").value;
var LastName = document.getElementById("lastName").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
var zip = document.getElementById("zip").value;
// Define the new span's ID value:
var newId = id + 'Error';
// Check for the existence of the span:
var span = document.getElementById(newId);
if (span) {
span.firstChild.value = msg; // Update
} else {
document.getElementById('firstName').value = 'please enter first name';
document.getElementById('lastName').value = 'please enter first name';
// Create new.
}
// Create the span:
span = document.createElement('span');
span.id = newId;
span.className = 'error'
span.appendChild(document.createTextNode(msg));
// Add the span to the parent:
elem.parentNode.appendChild(span);
elem.previousSibling.className = 'error';
} // End of main IF-ELSE.
} // End of addErrorMessage() function.
// This function removes the error message.
// It takes one argument: the form element ID.
function removeErrorMessage(id) {
'use strict';
// Get a reference to the span:
var span = document.getElementById(id + 'Error');
if (span) {
// Remove the class from the label:
span.previousSibling.previousSibling.className = null;
// Remove the span:
span.parentNode.removeChild(span);
} // End of IF.
} // End of removeErrorMessage() function