In Javascript: How to remove a “form-group has-success” or “form-group has-error” class from an element and reset to default?

Question

I'm trying to reset the ag,usrnm,pswd,cnfrm elements to remove (when I click a reset button that triggers the reset function) "form-group has-success" or "form-group has-error" classes that were added earlier. I have tried several things as seen before and none of them work.

I also have a 2nd issue with a div on the bottom of the main screen with errors that I am trying to clear and it is not working with reseting the innerHTML to "".

So far only the reseting of the inputs on the form works.

<script>

...

  function resetfunc(){
     document.getElementById("myForm").reset();
     document.getElementById("output").innerHTML = "";
     document.getElementById("ag").className.clear;
     document.getElementById("usrnm").removeClass('has-error');
     document.getElementById("pswrd").className.clear;
     document.getElementById("cnfrm").className.clear;
     return false;
}

-----edit here. reposted more code from here down-----

 <style type="text/css">
     .container {
      width: 500px;
      clear:both;
     }
      .container input{
        width:100%;
        clear:both;
      }
      .buttons{
        text-align:center;
      }

      #output{
        text-align:center;
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <form id="myForm" onsubmit="return valfunc()" onreset="return resetfunc()" ;>
      <div class="container">
        <div id="usrnm">
          <label class="control-label">Username: </label>
          <input class="form-control" type="text" name="username" id="username">
        </div>
        <div id="pswrd">
          <label class="control-label">Password: </label>
          <input class="form-control" type="password" name="password" id="password">
        </div>
        <div id="cnfrm">
          <label class="control-label">Confirm: </label>
          <input class="form-control" type="password" name="confirm" id="confirm">
        </div>
        <div id="ag">
          <label class="control-label">Age: </label>
          <input class="form-control" align:"right" type="text" name="age" id="age"> <br>
        </div>
      </div>

       <div class="buttons">
        <input type="submit" id="submit" class="btn btn-primary" onsubmit="valfunc();">
        <input type="reset" id="reset" class="btn btn-default" onreset="resetfunc()">
       </div>
    </form>
    <br>
    <div class="alert alert-danger" id="output">
      <ul> </ul>
    </div>


    <script>


    function valfunc() {

    document.getElementById("output").style.visibility = "visible";
    var username = 
      document.getElementById("username").value;
    var password = 
      document.getElementById("password").value;
    var confirm = 
      document.getElementById("confirm").value;
    var age =
      document.getElementById("age").value;
    var myerror = "";
    var nouser = 0;

    var error = [];

    if (username.length==0)
    {
      nouser = 1;
      myerror += "<li> Username field has been left blank.";
      error[0] = 1;
    }

    if (password.length==0)
    {
      myerror += "<li> Password field has been left blank.";
      error[1] = 1;
    }

    if (confirm.length==0)
    {
      myerror += "<li> Confirm field has been left blank.";
      error[2] = 1;
    }

    if (age.length==0)
    {
      myerror += "<li> Age field has been left blank.";
      error[3] = 1;
    }

    if ((username.length <5) || (username.length > 15))
    {
      myerror += 
      "<li> Username should be between 5 and 15 characters long.";
      error[0] = 1;
    }

    if (password !== confirm) {
      myerror += 
      "<li> Password and Confirm input text box values should match.";
      error[1] = 1;
      error[2] = 1 ; 
    }

    var letters = /^[A-Za-z]+$/;
    if(username.match(letters)){
     }
     else if(nouser==1){
     }
     else {
      myerror += 
      "<li> Username can only have letters.";
      error[0] = 1;
     }

    if (age <= 0) {
      myerror += 
      "<li> Age should be a positive integer.";
      error[3] = 1;    
    } else {
      if ((age<18)||(age>110)){
      myerror += 
      "<li> Age should be between the values 18 and 110.";
      error[3] = 1;
      }
    }


    if (error[0]==1){
      document.getElementById("usrnm").className = "form-group has-error";
    }
    else {
      document.getElementById("usrnm").className = "form-group has-success";
    }

    if (error[1]==1){
      document.getElementById("pswrd").className = "form-group has-error";
    }
    else {
      document.getElementById("pswrd").className = "form-group has-success";
    }

    if (error[2]==1){
      document.getElementById("cnfrm").className = "form-group has-error";
    }
    else {
      document.getElementById("cnfrm").className = "form-group has-success";
    }

    if (error[3]==1){
      document.getElementById("ag").className = "form-group has-error";
    }
    else {
      document.getElementById("ag").className = "form-group has-success";
    }


    document.getElementById("output").innerHTML = myerror;

    if (myerror.length > 1) {
      return false;
    }
    else {
      document.getElementById("output").innerHTML = "Form values successfully validated.";
      document.getElementById("output").className = "alert alert-success";
      return true;
    }

    }

    function resetfunc(){
      document.getElementById("myForm").reset();
      document.getElementById("output").innerHTML = "";
      document.getElementById("ag").className.clear;
      document.getElementById("usrnm").removeClass('has-error');
      document.getElementById("pswrd").className=""
      document.getElementById("cnfrm").className.clear;
      return false;
    }




    </script>

Answer 1

For remove classnames ,You should use node.classList.remove('className') :

function resetfunc(){
     document.getElementById("myForm").reset();
     document.getElementById("output").innerHTML = "";
     document.getElementById("ag").classList.remove('classNameExample');
     document.getElementById("usrnm").classList.remove('has-error');
     document.getElementById("pswrd").classList.remove('classNameExample');
     document.getElementById("cnfrm").classList.remove('classNameExample');
     return false;
}

I rebuild your code:

  document.addEventListener('DOMContentLoaded', function() { let output = document.getElementById("output"); let username = document.getElementById("username"); let password = document.getElementById("password"); let confirm = document.getElementById("confirm"); let age = document.getElementById("age"); let reset = document.getElementById('reset'); let submit = document.getElementById('submit'); let list = document.getElementById('list'); let usernameContainer = document.getElementById("usrnm"); let passwordContainer = document.getElementById("pswrd"); let confirmContainer = document.getElementById("cnfrm"); let ageContainer = document.getElementById('ag'); reset.addEventListener('click', (ev) => { resetfunc(); }) submit.addEventListener('click', (ev) => { valfunc(ev); }) function valfunc(ev) { output.style.visibility = "visible"; var usernameValue = username.value; var passwordValue = password.value; var confirmValue = confirm.value; var ageValue = age, value; var myerror = ""; var nouser = 0; var error = []; let clearListItem = document.createElement('li'); let docFrError = new DocumentFragment(); // let docFrError = new DocumentFragment(); if (usernameValue.length == 0) { nouser = 1; let cloneLi = clearListItem.cloneNode(); cloneLi.textContent = 'Username field has been left blank.' docFrError.append(cloneLi); error[0] = 1; } else if ((usernameValue.length < 5) || (usernameValue.length > 15)) { let cloneLi = clearListItem.cloneNode(); cloneLi.textContent = 'Username should be between 5 and 15 characters long' docFrError.append(cloneLi); error[0] = 1; } if (passwordValue.length == 0) { let cloneLi = clearListItem.cloneNode(); cloneLi.textContent = 'Password field has been left blank.' docFrError.append(cloneLi); error[1] = 1; }else if (passwordValue !== confirmValue) { let cloneLi = clearListItem.cloneNode(); cloneLi.textContent = 'Password and Confirm input text box values should match' docFrError.append(cloneLi); error[1] = 1; error[2] = 1; } var letters = /^[A-Za-z]+$/; if (usernameValue.match(letters)) {} else if (nouser == 1) {} else { let cloneLi = clearListItem.cloneNode(); cloneLi.textContent = 'Username can only have letters.' docFrError.append(cloneLi); error[0] = 1; } if (confirmValue.length == 0) { let cloneLi = clearListItem.cloneNode(); cloneLi.textContent = 'Confirm field has been left blank.' docFrError.append(cloneLi); error[2] = 1; } if (ageValue.length == 0) { let cloneLi = clearListItem.cloneNode(); cloneLi.textContent = 'Age field has been left blank.' docFrError.append(cloneLi); error[3] = 1; }else if (ageValue <= 0) { let cloneLi = clearListItem.cloneNode(); cloneLi.textContent = 'Age should be a positive integer.' docFrError.append(cloneLi); error[3] = 1; } else if ((ageValue < 18) || (ageValue > 110)) { let cloneLi = clearListItem.cloneNode(); cloneLi.textContent = 'Age should be between the values 18 and 110.' docFrError.append(cloneLi); error[3] = 1; } if (error[0] == 1) { usernameContainer.classList.add("form-group", "has-error"); } else { usernameContainer.classList.add("form-group", "has-success"); } if (error[1] == 1) { passwordContainer.classList.add("form-group", "has-error"); } else { passwordContainer.classList.add("form-group", "has-success"); } if (error[2] == 1) { confirmContainer.classList.add("form-group", "has-error"); } else { confirmContainer.classList.add("form-group", "has-success"); } if (error[3] == 1) { ageContainer.classList.add("form-group", "has-error"); } else { ageContainer.classList.add("form-group", "has-success"); } if (docFrError.childNodes.length > 0) { list.append(docFrError); ev.preventDefault(); } else { let cloneLi = clearListItem.cloneNode(); cloneLi.textContent = 'Form values successfully validated.' docFrError.append(cloneLi); output.classList.add("alert", " alert-success"); list.append(docFrError); return true; } } function resetfunc() { list.innerHTML = ""; ageContainer.classList.remove("form-group", "has-success", 'has-error'); usernameContainer.classList.remove('has-error'); passwordContainer.classList.remove("form-group", "has-success", 'has-error'); confirmContainer.classList.remove("form-group", "has-success", 'has-error'); } });

  <form id="myForm"> <div class="container"> <div id="usrnm"> <label class="control-label">Username: </label> <input class="form-control" type="text" name="username" id="username"> </div> <div id="pswrd"> <label class="control-label">Password: </label> <input class="form-control" type="password" name="password" id="password"> </div> <div id="cnfrm"> <label class="control-label">Confirm: </label> <input class="form-control" type="password" name="confirm" id="confirm"> </div> <div id="ag"> <label class="control-label">Age: </label> <input class="form-control" align: "right" type="text" name="age" id="age"> <br> </div> </div> <div class="buttons"> <input type="submit" id="submit" class="btn btn-primary"> <input type="reset" id="reset" class="btn btn-default"> </div> </form> <div class="alert alert-danger" id="output"> <ul id="list"> </ul> </div>

In Javascript: How to remove a “form-group has-success” or “form-group has-error” class from an element and reset to default?

Question

1 answers

solution1
0 2018-01-22 20:13:13

In Javascript: How to remove a “form-group has-success” or “form-group has-error” class from an element and reset to default?

Question

1 answers

solution1 0 2018-01-22 20:13:13

solution1
0 2018-01-22 20:13:13