javascript - 使用javascript验证表单，失败时激活错误类

Question

我正在尝试做一个验证表，我会在下面给你。我想做一个检查电子邮件是否有效以及用户名是否写入输入的功能。当一切正常时，应该发送它，但当出现错误时，应该激活无效类。我怎样才能做到这一点 ？或者我做错了什么？

代码如下:

function formValidation() {
    let mail = document.forms['newslettersub']['email'];
    let username = document.forms['newslettersub']['username'];

    if (mail.value == "") {
        window.alert("Please enter a valid e-mail address.");
        mail.classList.toggle('invalid');
        return false;
    }
    if (mail.value.indexOf("@", 0) < 0) {
        window.alert("Please enter a valid e-mail address.");
        mail.classList.toggle('invalid');
        return false;
    }

    if (mail.value.indexOf(".", 0) < 0) {
        window.alert("Please enter a valid e-mail address.");
        mail.classList.toggle('invalid');
        return false;
    }
    if (username.selectedIndex < 1) {
        alert("Please write your username.");
        username.classList.toggle('invalid');
        return false;
    } else {
        return true;
    }
}

.subscription {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 360px;
  margin: 50px auto 100px;
}

.subscription label {
  margin: 0 0 8px 0;
  font-weight: 700;
  font-size: 13px;
}

.subscription input,
.subscription select {
  width: 360px;
  height: 40px;
  border: 2px solid #ebeded;
  border-radius: 7px;
  outline: 0;
}

.subscription input::-webkit-input-placeholder,
.subscription select::-webkit-input-placeholder {
  font-family: "Helvetica", Arial;
  font-weight: 400;
  font-size: 13px;
  color: #a6adb4;
  position: relative;
  left: 5%;
}

.subscription input:-ms-input-placeholder,
.subscription select:-ms-input-placeholder {
  font-family: "Helvetica", Arial;
  font-weight: 400;
  font-size: 13px;
  color: #a6adb4;
  position: relative;
  left: 5%;
}

.subscription input::-ms-input-placeholder,
.subscription select::-ms-input-placeholder {
  font-family: "Helvetica", Arial;
  font-weight: 400;
  font-size: 13px;
  color: #a6adb4;
  position: relative;
  left: 5%;
}

.subscription input::placeholder,
.subscription select::placeholder {
  font-family: "Helvetica", Arial;
  font-weight: 400;
  font-size: 13px;
  color: #a6adb4;
  position: relative;
  left: 5%;
}

.subscription input:focus,
.subscription select:focus {
  border: 2px solid #72acff;
}

.subscription input {
  margin: 0 0 26px 0;
}

.subscription input.invalid {
  border: 2px solid #ff4d4d;
}

.subscription .username {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  height: 46px;
  margin-bottom: 26px;
}

.subscription .username a {
  text-align: center;
  background: #ebeded;
  padding: 14px 16px;
  border-radius: 7px 0 0 7px;
  font-family: "Helvetica", Arial;
  font-weight: 700;
  font-size: 13px;
  color: #a6adb4;
}

.subscription .username input {
  border-radius: 0 7px 7px 0;
}

.subscription .select-container {
  position: relative;
}

.subscription .select-container select option:focus {
  border: 2px solid #72acff;
}

.subscription .select-container .dquestion {
  font-family: "Helvetica", Arial;
  font-weight: 400;
  font-size: 13px;
  color: #a6adb4;
  padding-left: 16px;
}

.subscription .submit {
  width: 180px;
  margin-top: 30px;
  background: #FA6980;
  font-family: "Helvetica", Arial;
  font-weight: 700;
  font-size: 11px;
  color: #ffffff;
  border: none;
  cursor: pointer;

<div class="subscription">
        <form name="newslettersub" onsubmit="return formValidation()">
            <label for="mail">Email</label>
            <input type="text" name="email" id="mail">
            <input type="text" name="email" id="mail" placeholder="Email">
            <label for="uname">Username</label>
            <div class="username">
                <a>adobe.com/</a>
                <input type="text" name="username" id="uname">
            </div>
            <label for="dquestion">Dropdown question ?</label>
            <div class="select-container">
                <select class="dquestion" name="dropdownquestion" id="dquestion">
            <option value="item1">Item 1</option>
            <option value="item2">Item 2</option>
            <option value="item3">Item 3</option>
            </select>
            </div>
            <input class="submit" type="submit" value="Submit">
        </form>
    </div>

Answer 1

因为邮件变量是一个数组。

您有两个名称为 mail 的输入。let mail = document.forms['newslettersub']['email']; => 邮件将是数组并且 mail.classList 是 undefined

你需要这样检查验证

 var valid = true;
        for(var i =0; i< mail.length;i++){
        if (mail[i].value == "") {
          mail[i].classList.toggle('invalid');
          valid = false;
        }
   }
     if(valid == false){
    return valid;
}

function formValidation() {
    let mail = document.forms['newslettersub']['email'];
    let username = document.forms['newslettersub']['username'];

    
        //window.alert("Please enter a valid e-mail address.");
    var valid = true;
		for(var i =0; i< mail.length;i++){
		if (mail[i].value == "") {
          mail[i].classList.toggle('invalid');
          valid = false;
		}
		}
    if(valid == false){
        return valid;
    }
    if (mail.value.indexOf("@", 0) < 0) {
        //window.alert("Please enter a valid e-mail address.");
        mail.classList.toggle('invalid');
        return false;
    }

    if (mail.value.indexOf(".", 0) < 0) {
        //window.alert("Please enter a valid e-mail address.");
        mail.classList.toggle('invalid');
        return false;
    }
    if (username.selectedIndex < 1) {
        //alert("Please write your username.");
        username.classList.toggle('invalid');
        return false;
    } else {
        return true;
    }
}

.subscription {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 360px;
  margin: 50px auto 100px;
}

.subscription label {
  margin: 0 0 8px 0;
  font-weight: 700;
  font-size: 13px;
}

.subscription input,
.subscription select {
  width: 360px;
  height: 40px;
  border: 2px solid #ebeded;
  border-radius: 7px;
  outline: 0;
}

.subscription input::-webkit-input-placeholder,
.subscription select::-webkit-input-placeholder {
  font-family: "Helvetica", Arial;
  font-weight: 400;
  font-size: 13px;
  color: #a6adb4;
  position: relative;
  left: 5%;
}

.subscription input:-ms-input-placeholder,
.subscription select:-ms-input-placeholder {
  font-family: "Helvetica", Arial;
  font-weight: 400;
  font-size: 13px;
  color: #a6adb4;
  position: relative;
  left: 5%;
}

.subscription input::-ms-input-placeholder,
.subscription select::-ms-input-placeholder {
  font-family: "Helvetica", Arial;
  font-weight: 400;
  font-size: 13px;
  color: #a6adb4;
  position: relative;
  left: 5%;
}

.subscription input::placeholder,
.subscription select::placeholder {
  font-family: "Helvetica", Arial;
  font-weight: 400;
  font-size: 13px;
  color: #a6adb4;
  position: relative;
  left: 5%;
}

.subscription input:focus,
.subscription select:focus {
  border: 2px solid #72acff;
}

.subscription input {
  margin: 0 0 26px 0;
}

.subscription input.invalid {
  border: 2px solid #ff4d4d;
}

.subscription .username {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  height: 46px;
  margin-bottom: 26px;
}

.subscription .username a {
  text-align: center;
  background: #ebeded;
  padding: 14px 16px;
  border-radius: 7px 0 0 7px;
  font-family: "Helvetica", Arial;
  font-weight: 700;
  font-size: 13px;
  color: #a6adb4;
}

.subscription .username input {
  border-radius: 0 7px 7px 0;
}

.subscription .select-container {
  position: relative;
}

.subscription .select-container select option:focus {
  border: 2px solid #72acff;
}

.subscription .select-container .dquestion {
  font-family: "Helvetica", Arial;
  font-weight: 400;
  font-size: 13px;
  color: #a6adb4;
  padding-left: 16px;
}

.subscription .submit {
  width: 180px;
  margin-top: 30px;
  background: #FA6980;
  font-family: "Helvetica", Arial;
  font-weight: 700;
  font-size: 11px;
  color: #ffffff;
  border: none;
  cursor: pointer;

<div class="subscription">
        <form name="newslettersub" onsubmit="return formValidation()">
            <label for="mail">Email</label>
            <input type="text" name="email" id="mail">
            <input type="text" name="email" id="mail" placeholder="Email">
            <label for="uname">Username</label>
            <div class="username">
                <a>adobe.com/</a>
                <input type="text" name="username" id="uname">
            </div>
            <label for="dquestion">Dropdown question ?</label>
            <div class="select-container">
                <select class="dquestion" name="dropdownquestion" id="dquestion">
            <option value="item1">Item 1</option>
            <option value="item2">Item 2</option>
            <option value="item3">Item 3</option>
            </select>
            </div>
            <input class="submit" type="submit" value="Submit">
        </form>
    </div>