CODEWITHSUNDEEP
javascriptjqueryforms
Jordan Dunton
Jordan Dunton

Reputation: 171

Form Validation against an Array with JavaScript/ jQuery

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>

Upvotes: 1

Views: 55

Answers (1)

Amit
Amit

Reputation: 1560

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>

Upvotes: 1

Related Questions