带有无效字段和正确数据的 OnSubmit 数据验证 return

Question

我的实验室遇到了问题，只需要一些指导或提示，告诉我该去哪里。我需要一个功能，在任何字段无效时提醒用户，并用红色勾勒出任何无效部分，如果没有任何部分有效，则只显示用户输入，例如姓名、性别状态、最喜欢的电影类型等。

我很困惑，因为我创建了一个测试函数，当用户选择提交时它甚至无法正常工作。当名称字段留空时，它甚至不会提醒用户将该字段留空。

    <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:lasdfasdf@asdfas.com" >


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>

Answer 1

您遇到的问题是您正在使用 htmlinput 整个 dom 元素而不是它的值，当有疑问时总是打印值并检查它实际包含的内容 console.log(fname);。因此，在您的情况下，您需要访问它的值，实际上您可以从 console.log 获得它。 document.myForm.firstName.value

我为你在输入中询问的红色东西添加了一个小的开头，但剩下的留给你，所以我不会破坏它的乐趣。

这是一个有效的 jsfiddle：https://jsfiddle.net/odsvpwf0/

Answer 2

使用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:lasdfasdf@asdfas.com" 

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>

带有无效字段和正确数据的 OnSubmit 数据验证 return

OnSubmit data validation w/ invalid fields and correct data return

html

javascript

css

validation

field