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>

标签： javascripthtmlcss

Answer 1

因为 mail 变量是一个array.

您有两个带有名称邮件的输入。 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>