I can't get "else if " part of the code in java-script for form-validation

user_14335775 0
Viewed 97

I am doing a login form ,where, if the input fields is empty I want to declare an error message. I am only getting the 'if' part of the code but not the 'else if' part.

var a = document.getElementById('fname');
var b = document.getElementById('pwd');
var c = document.getElementById('demo1');
var d = document.getElementById('demo2');

function func() {
  if (a.value == null || a.value == "") {
    c.innerHTML = 'Fields can\'t be empty';
    a.style.border = "2px solid red";
    return false;
  } else if (b.value == null || b.value == "") {
    d.innerHTML = "Password should be minimum 6 character";
    b.style.border = "2px solid red";
    return false;
  } else {
    true
  }

}
input {
  display: block;
}
<form action="" onsubmit="return func()">
  <input type="text" name="fname" id="fname" placeholder="first name"><br><br>
  <p id="demo1" style="color: red;"></p>
  <input type="password" name="pwd" id='pwd' placeholder='password'><br><br>
  <p id="demo2" style="color: red;"></p>
  <button type="submit" id="smbt"> sumbit</button>
</form>

simple-html-dom javascript
3 Answers

Please try the below code hope it helps.

function func() {
    var IsValid = true;
    if (a.value == null || a.value == "") {
        c.innerHTML = 'Fields can\'t be empty';
        a.style.border = "2px solid red";
        IsValid = false;
    }
    if (b.value == null || b.value == "") {
        d.innerHTML = "Password should be minimum 6 character";
        b.style.border = "2px solid red";
        IsValid = false;
    }
    return IsValid;
}
user_51766070 
var a = document.getElementById('fname');
var b = document.getElementById('pwd');
var c = document.getElementById('demo1');
var d = document.getElementById('demo2');

function func() {

  if (a.value == null || a.value == "") {
    c.innerHTML = 'Fields can\'t be empty';
    a.style.border = "2px solid red";
   }
  if (b.value == null || b.value == "") {
    d.innerHTML = "Password should be minimum 6 character";
    b.style.border = "2px solid red";
   }



  if (a.value == null || a.value == "") {
    return false;
  } else if (b.value == null || b.value == "") {
    return false;
  } else {
    true
  }

}

HTML :

<form action="" onsubmit="return func()">
  <input type="text" name="fname" id="fname" placeholder="first name"><br><br>
  <p id="demo1" style="color: red;"></p>
  <input type="password" name="pwd" id='pwd' minlength="6" placeholder='password'><br><br>
  <p id="demo2" style="color: red;"></p>
  <button type="submit" id="smbt"> sumbit</button>
</form>

Use something like that - it will dislay both messages if you leave empety login and password. And HTML include 6 chars in your password.

You need to use minlength="6" in your input attribute just.

user_76525160

Also quoting @vaibhav 's ans. I would add extra functionality by setting the min lenght of the password to 6. Also I added some conditions to prevent edge cases as explained in comments

var a = document.getElementById('fname');
var b = document.getElementById('pwd');
var c = document.getElementById('demo1');
var d = document.getElementById('demo2');

   function func() {
  var IsValid = true;
  c.innerHTML ="";                    // if you got the name empty the first time and 
  a.style.border = "2px solid green"; //then corrected the name and got the passwprd wrong, */
  d.innerHTML ="";                    // both the name and the pass would be in red. 
  b.style.border = "2px solid green"; // Also the reason for setting the `innerHTML =""`

  
    if (a.value == null || a.value == "") {
        c.innerHTML = 'Fields can\'t be empty';
        a.style.border = "2px solid red";
        IsValid = false;
    }              //    */

    if (b.value.length < 6) {          // min lenght of password
        d.innerHTML = "Password should be minimum 6 character";
        b.style.border = "2px solid red";
        IsValid = false;
    }
    return IsValid;
}
input {
  display: block;
}
<form action="" onsubmit="return func()">
  <input type="text" name="fname" id="fname" placeholder="first name" ><br><br>
  <p id="demo1" style="color: red;"></p>
  <input type="password" name="pwd" id='pwd' placeholder='password' ><br><br>
  <p id="demo2" style="color: red;"></p>
  <button type="submit" id="smbt"> sumbit</button>
</form>

<!-- with the required attribute in input tag a user would not be able to keep them empty in this case.

<form action="" onsubmit="return func()">
  <input type="text" name="fname" id="fname" placeholder="first name" required><br><br>
  <p id="demo1" style="color: red;"></p>
  <input type="password" name="pwd" id='pwd' placeholder='password' required><br><br>
  <p id="demo2" style="color: red;"></p>
  <button type="submit" id="smbt"> sumbit</button>
</form>

-->

user_151932850
Related