使用javascript验证表单，失败主动错误类

问题描述 投票：0回答：2

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

这是代码：

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>
javascript html css
2个回答
1
投票

因为邮件变量是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>
0
投票

你可以尝试这样的事情。创建两个函数setError和removeError，并相应地在各自的验证中调用它们。

function setError(elem){
 if(elem.className.indexOf('invalid')< 0){
    elem.classList.add('invalid');
 }
}

function removeError(elem){
 if(elem.className.indexOf('invalid')>= 0){
    elem.classList.remove('invalid');
 }
}


function formValidation() {
    let mail = document.forms['newslettersub']['email'];
    let username = document.forms['newslettersub']['username'];
    let dquestion = document.forms['newslettersub']['dquestion'];
    let validForm=true;
    if (mail.value == "" || mail.value.indexOf("@", 0) < 0 || mail.value.indexOf(".", 0) < 0) {
        window.alert("Please enter a valid e-mail address.");
        validForm= false;
        setError(mail);
    }else{
         removeError(mail);
    }
    
    if (!username.value) {
        alert("Please write your username.");
        validForm= false;
        setError(username);
    }else{
        removeError(username);
    }
    
     
    if (!dquestion.selectedIndex) {
        alert("Please select your question.");
        validForm= false;
        setError(dquestion);
    }
    else{
        removeError(dquestion);
    }
    
    return validForm;
}
.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,
.subscription select.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" 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.