Form Validation against an Array with JavaScript/ jQuery

Question

I've seen a couple answers on Stack but none of them detail how exactly this works. Currently I have a simple form with username and password forms which works with predefined values but not working when values are in an array. I want to use JS to validate the forms that both password and username match data points as strings within the forms. My code below has no errors to my knowledge, but my logic statements don't fire a correct entry. How can I fix this? (I included jQuery because I know a little bit in that realm and if it helps I'll take it.)

<!DOCTYPE html>
 <html>
  <head>
    <title>Coding Project</title>
  </head>
  <body style="font-family:Helvetica">
    <h1>
    Simple Login Form:
    </h1>
    <form>
      <input type="text" id="username" placeholder="Enter username" value=""> <br> <br>
      <input type="password" id="password" placeholder="Enter password" value=""> <br> <br>
      <button type="button" onClick="mySubmit()"> Submit
      </button>
    </form>
     <script type="text/javascript">
     	function mySubmit() {
      	var userNameInput = document.getElementById("username").value;
        var passWordInput = document.getElementById("password").value;
        var existingUserName = [["46179"], ["55678"]];
        var existingPassWord = [["helloworld123"], ["helloworld456"]];
        if (userNameInput == existingUserName && passWordInput == existingPassWord) {
        	alert("Correct Username");
        } else if (userNameInput == "" && passWordInput == "") {
        	alert("Empty field, please enter Username and Password or Signup");
        } else {
        	alert("Incorrect Username or Password");
        }
      }
     </script>
  </body>
 </html>

Amit · Accepted Answer · 2019-10-09 15:16:29Z

1

I just corrected your condition, please check this: (If username and password both found in existing array then it will be triggered the warning "Incorrect Username or Password")

Note: If it's not fulfill your requirement, then please let me know.

<!DOCTYPE html>
 <html>
  <head>
    <title>Coding Project</title>
  </head>
  <body style="font-family:Helvetica">
    <h1>
    Simple Login Form:
    </h1>
    <form>
      <input type="text" id="username" placeholder="Enter username" value=""> <br> <br>
      <input type="password" id="password" placeholder="Enter password" value=""> <br> <br>
      <button type="button" onClick="mySubmit()"> Submit
      </button>
    </form>
     <script type="text/javascript">
     	function mySubmit() {
      	var userNameInput = document.getElementById("username").value;
        var passWordInput = document.getElementById("password").value;
        var existingUserName = ["46179", "55678"];
        var existingPassWord = ["helloworld123", "helloworld456"];
        if (!existingUserName.includes(userNameInput) && !existingPassWord.includes(passWordInput)) {
        	alert("Correct Username");
        } else if (userNameInput == "" && passWordInput == "") {
        	alert("Empty field, please enter Username and Password or Signup");
        } else {
        	alert("Incorrect Username or Password");
        }
      }
     </script>
  </body>
 </html>

answered Oct 9, 2019 at 15:16

Amit

1,5601 gold badge15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jordan Dunton Over a year ago

Could you perhaps explain how it works, I feel for learning purposes just getting the answer isn't as beneficial as figuring out HOW it works.

Amit Over a year ago

I see, actually it checks if username and password has already have or not using includes() function. Check this url: w3schools.com/jsref/jsref_includes_array.asp. And also please don't forget to check javascript array structure: w3schools.com/js/js_arrays.asp

Jordan Dunton Over a year ago

Thank you very much sir for the help.

Jordan Dunton Over a year ago

Hey, I tried to implement this code and for some reason it is still not firing a success unless all inputs are put in like username is "4617955678" and password is "Bc12345helloworld123". How can I get it to only want one of the values at a time?

Collectives™ on Stack Overflow

Form Validation against an Array with JavaScript/ jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related