我无法在用于表单验证的 java 脚本中获得“else if”部分代码

Question

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>

Answer 1

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;
}

Answer 2

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.

Answer 3

Also quoting @vaibhav 's ans. I would add extra functionality by setting the min lenght of the password to 6. Also set the required field in input tag

 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; /* // remove this line if u dont want the required attribute in input tag i added 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 =""` /* // remove this line too if u dont want the required attribute in input tag i added 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" 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> <!-- with the required attribute in input tag a user would not be able to keep them empty in this case-->