我的實驗室遇到問題，只需要一些關于去哪里的指導或提示。我需要一個功能，當任何欄位無效時提醒用戶，紅色勾勒出任何無效部分，如果沒有部分有效，則只顯示用戶輸入，如姓名、性別狀態、喜歡的電影型別等。
我很難過，因為我創建了一個測驗功能，當用戶選擇提交時它甚至無法正常作業。當名稱欄位留空時，它甚至不會提醒將該欄位留空的用戶。
<html>
<head>
<title>Form Practice</title>
</head>
<body>
<script type="text/javascript">
///// validate names
const form = document.getElementById("form");
document.getElementById("form").addEventListener("submit", validate);
var myForms=document.getElementById("myForms")
function validate(e) {
var first= document.forms["myForm"]["firstName"].value;
if(first==""){
alert("enter the first name");
event.preventDefault()
firstName.style.borderColor="red";
event.preventDefault()
return false;
}
}
</script>
<h1>Please Provide the Following Information</h1>
*fields marked with an asterisk are required<br><br>
<form name="myForm" id="form" method="post" action="mailto:[email protected]" >
First Name*: <input type="text" name="firstName"><br>
Last Name*: <input type="text" name="lastName"><br>
Gender*: <input type="radio" name="gender" value="M">Male
<input type="radio" name="gender" value="F">Female <br>
Choose Your Favorite Types of Movies (check all that applies):
<input type="checkbox" name="movies" value="comedy"> Comedy
<input type="checkbox" name="movies" value="drama"> Drama
<input type="checkbox" name="movies" value="action"> Action
<input type="checkbox" name="movies" value="horror"> Horror<br>
Please select your state:
<select name="state">
<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>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select> <br>
Agree to privacy policy* <input type="checkbox" name="privacy" value="yes"> <br><br>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
uj5u.com熱心網友回復：
使用or運算子檢查名字或姓氏是否為空，還需要event.preventDefault()取消默認操作
function ValidationEvent(e) {
var fname = document.myForm.firstName;
var lname = document.myForm.lastName;
if (!fname.value || !lname.value) { // use 'or' operator here
fname.classList.add('red-border');
lname.classList.add('red-border');
e.preventDefault(); // Cancel action
alert("fill out please.");
}
else {
alert("thank you");
}
}<h1>Please Provide the Following Information</h1>
*fields marked with an asterisk are required<br><br>
<form name="myForm" method="post" action="mailto:[email protected]"
onsubmit="ValidationEvent(event)"> <!-- ValidationEvent(event) is required -->
First Name*: <input type="text" name="firstName"><br>
Last Name*: <input type="text" name="lastName"><br>
Gender*: <input type="radio" name="gender" value="M">Male
<input type="radio" name="gender" value="F">Female <br>
Choose Your Favorite Types of Movies (check all that applies):
<input type="checkbox" name="movies" value="comedy"> Comedy
<input type="checkbox" name="movies" value="drama"> Drama
<input type="checkbox" name="movies" value="action"> Action
<input type="checkbox" name="movies" value="horror"> Horror<br>
Please select your state:
<select name="state">
<option value="AL">Alabama</option>
</select> <br>
Agree to privacy policy* <input type="checkbox" name="privacy" value="yes"> <br><br>
<input type="submit">
<input type="reset">
</form>uj5u.com熱心網友回復：
您正在努力解決的是您使用的是 htmlinput 整個 dom 元素而不是它的值，當有疑問時，總是列印該值并檢查它實際包含的內容console.log(fname);。因此，在您的情況下，您需要訪問它的值，實際上您可以從 console.log 獲得。document.myForm.firstName.value
我為您在輸入中詢問的紅色事物添加了一個小開頭，但其余部分留給您，所以我不會破壞它的樂趣。
這是一個有效的 jsfiddle：https ://jsfiddle.net/odsvpwf0/
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/462057.html
標籤：javascript html css 验证 场地