Validation form with javascript, on failure active error class

Question

I am trying to do a validation form that I will give you belowe. I want to do a function that check if email is valid and if username is writed in input. When everything is fine it should be sent but when something is wrong class invalid should be activated. How can I do this ? Or what am I doing wrong ?

Here is the code:

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>

first off remove "return" and the parens () from your onsubmit call. In your formValidation function add the event argument that is auto passed. formValidation(e) then make sure you call e.preventDefault() before you do any validation. — GifCo
– GifCo, Commented Apr 18, 2019 at 14:58

Hien Nguyen · Accepted Answer · 2019-04-18 15:59:43Z

Because mail variable is a array.

You have two input with name mail. let mail = document.forms['newslettersub']['email']; => mail will be array and mail.classList is undefined

you need check validate like this

 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>

Could you advice me if for usernem field check if something is written function should look like this ? if (username == "0") { username.classList.toggle('invalid'); return false; }

Bharat Choudhary · Accepted Answer · 2019-04-18 15:27:48Z

You can try something like this. create two function setError and removeError, and accordingly call them on their respective validation.

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>

Collectives™ on Stack Overflow

Validation form with javascript, on failure active error class

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related