Validate form from an Array JavaScript

Question

I'm new to JavaScript and i'm trying to create a login page and have the username and passwords or pins pull from an array. I tried my best to put it together and make it work, but I can't. Any help would be appertained. At the moment the login form is not pulling from the array. Please help.
original code:

 }
    var customer= ["John", "Mary", "Doe"]
    var pin = [1452, 7858, 2016]

    function validateusername(username) {
      if (username == customer) {
        return true;
      }else {
        return false;
      }
    }
    function validatepassword(password) {
      if (pin == pin) {
        return true;
      }else {
        return false;
      }
    }

New updated code( still doesn't run)

   <body>
<h1> Login to the Web ATM </h1>
<script src="js/scripts.js"></script>
<section class="loginform cf">
</section>
<form id="login" name="login" action="index_submit" onSubmit="return false" method="get" accept-charset="utf-8">
<table>
  <tr>
    <td>   <label for="username">Username:</label></td>
    <td><input type="text" name="username" id="username" placeholder="UserName" required ></td>
    <td>REQUIRED</td>
  </tr>
  <tr>
    <td><label for="password">PIN Number:</label></td>
    <td><input type="password" name="password" id="password" placeholder="PIN" pattern="[0-9]{4}" required ></td>
    <td>REQUIRED</td>
  </tr>
  <tr>
    <td><label for="email">Email:</label></td>
    <td><input type="email" name="email" id="email" placeholder="[email protected]" pattern="^(?=.*\..*)(?=.*@.*).*$" ><br/></td>
    <td><div id="reqDisplay"></div></td>
  </tr>
  <tr>
    <td> Empty </td>
    <td><input id="emailBox" type="checkbox" name="checkbox" value="email transaction " onchange="displayReq()"/>email me a transaction confirmation</td>
    <td>  </td>
  </tr>
  <tr>
    <td></td>
    <td> Select an Account: <select>
    <option value="account1">Checking</option>
    <option value="account2">Savings</option>
    <option value="account2">Money Market</option></select></td>
    <td><input type="submit" value="Continue>>" onclick="validateForm()"></td>
</form>

</table>

<script type="text/javascript">

function displayReq(){
  var divToReplace = document.getElementById("reqDisplay");
  var chk = document.getElementById("emailBox");
  var emailField = document.getElementById("email");

  if (chk.checked) {
    emailField.required = true;
    divToReplace.innerHTML = "REQUIRED";
  }else {
    divToReplace.innerHTML = "";
    emailField.required = false;
  }
}

function validateForm(){
  var myForm = document.getElementById("login");
  var chk = document.getElementById("emailBox");

}
var all_usernames = ["John", "Mary", "Doe"];
var all_pins = ["1452", "7858", "2016"]; // Make it strings, since input values are strings

function validate_user(username, pin) {
    var user_index = all_usernames.indexOf(username);
    if (user_index > -1) {
        return pin == all_pins[user_index];
    } else {
        return false;
    }
function validateemail(email) {

   if (email.indexOf("@") > -1 && email.indexOf(".") > -1) {
    return true;
  }else {
    return false;
  }
  if (validateusername(myForm.username.value) && validatepassword(myForm.password.value) && (validateemail(myForm.email.value) || !chk.checked) ) {
    alert("Welcome to your online ATM");
  } else {
    alert("Sorry the information you provided is incorrect");
  }
}
</script>

if (username == username) will always be true. How do you expect that to validate anything? — Barmar
– Barmar, Commented Nov 5, 2016 at 0:51
The username in parameters shadows the username from the parent scope. — kube
– kube, Commented Nov 5, 2016 at 0:52
@Barmar how should I do it then? username is the array that I want it to pull from. — ebramk
– ebramk, Commented Nov 5, 2016 at 0:53
Have you considered using HTML 5 validation? You can add attributes to the inputs which indicate what is considered valid values. — user2182349
– user2182349, Commented Nov 5, 2016 at 0:54
Use a different variable name for the array of valid user names and the user name you are checking. — user2182349
– user2182349, Commented Nov 5, 2016 at 0:55

Barmar · Accepted Answer · 2016-11-05 00:57:19Z

4

You need to use different names for the global arrays and the function parameters. Otherwise, the parameter variables shadow the global variables, and you can't refer to the global variables inside the functions.

And the way to tell if something is in an array is with the indexOf() method, not ==.

var all_usernames = ["John", "Mary", "Doe"];
var all_pins = ["1452", "7858", "2016"]; // Make it strings, since input values are strings

function validate_username(username) {
    return all_usernames.indexOf(username) > -1;
}
function validate_pin(pin) {
    return all_pins.indexOf(pin) > -1;
}

Note that having separate functions to validate the username and PIN will not tell you if the user entered their correct PIN. For instance, if they enter username John, it won't check if they entered PIN 1452, it will allow 2016 or 7858 as well. You should use a single function to valdate both:

function validate_user(username, pin) {
    var user_index = all_usernames.indexOf(username);
    if (user_index > -1) {
        return pin == all_pins[user_index];
    } else {
        return false;
    }
}

answered Nov 5, 2016 at 0:57

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

9 Comments

ebramk Over a year ago

Thank you for your help. I fixed my code as you guys suggested and I posted my whole document for you to look at. It is still not functioning correctly. Would you be able to help?

Barmar Over a year ago

There's no username variable in your new code. You're again using the same name for the global variable and the function parameter.

Barmar Over a year ago

Please put back your original code in the question. Readers need to see what problem I fixed with my answer.

Barmar Over a year ago

And remove anything from the question that isn't relevant to the problem. The CSS isn't important.

ebramk Over a year ago

I have removed erything as you asked. Do you see anything wrong with my code?

|

Collectives™ on Stack Overflow

Validate form from an Array JavaScript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related