使用javascript的验证表单，关于失败的活动错误类

时间：2019-04-18 14:44:19

标签： javascript html css

我正在尝试填写一份验证表，下面将给您。我想做一个检查电子邮件是否有效以及用户名是否写在输入中的功能。如果一切正常，则应发送该消息，但如果出现错误，则应激活无效类。我怎样才能做到这一点 ？还是我做错了什么？

代码如下：

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>

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：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>

相关问题
最新问题