我想检查我的姓氏元素是否有关于它的信息带有“If”语句，但我不知道放在哪里或者我是怎么回事。目的是在我点击提交按钮之前最终检查是否所有方框都已填满。那么最好的方法是检查这个吗？
function check() {
let lastName = document.findElementById('last-name').value;
addressForm = document.shippingAddressForm;
addressForm.addEventListener('submit', (event) => {
event.preventDefault();
});
alert("Please enter all fields ");
}<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
<script src="main.js" defer></script>
</head>
<body>
<form id="shipping-address-form" name="shippingAddressForm" action="#" method="post">
<h1>Shipping Address</h1>
<div class="flex-container">
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" />
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" />
</div>
</div>
<div class="flex-container">
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
</div>
<div class="flex-container">
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State:</label>
<input type="state" id="state" name="state" />
</div>
<div>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" />
</div>
</div>
<div class="flex-container">
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phoneNumber" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</body>
答案 0 :(得分：0)
您没有调用函数check()。你只定义了它。
试试这个我删除了函数check()的内容。此示例仅显示调用该函数（但更好的是在HTML https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input中使用required属性需要在页面的一半上）
function check() {
alert("Please enter all fields ");
}<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
<script src="main.js" defer></script>
</head>
<body>
<form id="shipping-address-form" name="shippingAddressForm" action="#" method="post" onsubmit='check()'>
<h1>Shipping Address</h1>
<div class="flex-container">
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" />
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" />
</div>
</div>
<div class="flex-container">
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
</div>
<div class="flex-container">
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State:</label>
<input type="state" id="state" name="state" />
</div>
<div>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" />
</div>
</div>
<div class="flex-container">
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phoneNumber" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</body>
以及如果您想显示带有FF的显示错误消息
错误消息
如果您希望Firefox在字段无法验证时显示自定义错误消息，您可以使用x-moz-errormessage属性执行此操作：
<input type="email"
x-moz-errormessage="Please specify a valid email address.">
答案 1 :(得分：0)
这是问题的旧学校解决方案：
工作小提琴：https://jsfiddle.net/almamun1996/k6n7ufou/19/
<强> HTML：
<body>
<form id="shipping-address-form" name="shippingAddressForm" action="#" method="post">
<h1>Shipping Address</h1>
<div class="flex-container">
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" />
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" />
</div>
</div>
<div class="flex-container">
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
</div>
<div class="flex-container">
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State:</label>
<input type="state" id="state" name="state" />
</div>
<div>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" />
</div>
</div>
<div class="flex-container">
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phoneNumber" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
</div>
<div class="button">
<input type="button" id="btnSubmit" onclick="check()" value="Submit"/>
</div>
</form>
</body>
<强> JS：
function check() {
if(document.getElementById('first-name').value == null || document.getElementById('first-name').value.trim() == ''){
alert("Please enter first-name ");
document.getElementById("first-name").focus();
return false;
}
if(document.getElementById('last-name').value == null || document.getElementById('last-name').value.trim() == ''){
alert("Please enter last-name ");
document.getElementById("last-name").focus();
return false;
}
if(document.getElementById('address').value == null || document.getElementById('address').value.trim() == ''){
alert("Please enter address ");
document.getElementById("address").focus();
return false;
}
if(document.getElementById('city').value == null || document.getElementById('city').value.trim() == ''){
alert("Please enter city ");
document.getElementById("city").focus();
return false;
}
if(document.getElementById('state').value == null || document.getElementById('state').value.trim() == ''){
alert("Please enter state ");
document.getElementById("state").focus();
return false;
}
if(document.getElementById('zip-code').value == null || document.getElementById('zip-code').value.trim() == ''){
alert("Please enter zip-code ");
document.getElementById("zip-code").focus();
return false;
}
if(document.getElementById('phone-number').value == null || document.getElementById('phone-number').value.trim() == ''){
alert("Please enter phone-number ");
document.getElementById("phone-number").focus();
return false;
}
if(document.getElementById('email').value == null || document.getElementById('email').value.trim() == ''){
alert("Please enter email ");
document.getElementById("email").focus();
return false;
}
alert('Form validated');
}