Не могу заставить работать валидацию формы SSN JavaScript

Question

Я новичок в JS и пытаюсь получить его, поэтому, когда кто-то вводит номер SSN в поле, он выдает им предупреждение, в котором НЕ указывается номер SSN.

HTML:

<form name="card" action="#">
    <input type="text" name="field" class="name social" size="60" placeholder="First and Last Name">
    <input type="text" name="field" class="phone social" size="60" placeholder="Phone Number">
    <input type="text" name="field" class="email social" size="60" placeholder="Email([e-mail])">

    <select class="select">
        <option value="My card has not yet arrived">My card has not yet arrived
        <option value="Direct Deposit">Direct Deposit
        <option value="Suggest a Card">Suggest a Card
        <option value="Issues with CARD.com">Issues with CARD.com
        <option value="Other">Other
    </select>

    <textarea name="field" class="text social " cols="60" rows="5" placeholder="How can we help you?"></textarea>
    <input type"submit" name="submit" class="subBtn" value="Submit" onclick="warnCC(document.card.field)">Submit</input>
</form>

JS:

<script>
  function warnCC()  
    {  

      var ssn = document.getElementsByTagName("input");
      // document.getElementsByClassName("social");
      var pattern = /^[0-9]{3}\-?[0-9]{2}\-?[0-9]{4}$/;
      if (ssn.value.match(pattern)) 
      {
        return true;
        alert("Please Do Not Enter SSN Info Into This Form");

      }
      else 
      {
        return false;
        alert("yay!")
      } 
    }
</script>

Любая помощь в том, где я могу пойти не так, будет очень полезна. Я также предпочел бы, чтобы это было сделано на "onfocusout", если кто-нибудь может дать мне совет по этому поводу.

Answer 1

getElementsByTagName а также getElementsByClassName оба возвращают список элементов. Этот список не имеет value имущество. Каждый из пунктов в списке имеет value свойство, но не список.

Вы захотите перебрать список входных данных и обработать каждый из них соответствующим образом, например:

var list = /*...get the list using either method you have in your code...*/;
var index, input;
for (index = 0; index < list.length; ++index) {
    input = list[index];
    // input.value will be the value of this particular input
}

Примечание: querySelectorAll имеет лучшую поддержку, чем getElementsByClassName (IE8, например, есть, но не getElementsByClassName), так что если вы хотите получить список с использованием класса, лучше всего использовать:

var list = document.querySelectorAll(".the-class-here");

Answer 2

Вы также должны выполнить функцию alert(), прежде чем вернуться из функции..., если вы хотите, чтобы отображался диалог alert().

Answer 3

Я изменил твою функцию. Вы можете увидеть это бездействие здесь: http://jsfiddle.net/tBqP2

  function warnCC() {

      var formElements = document.getElementsByTagName("input");
      for (var k in formElements) {
          // document.getElementsByClassName("social");
          var pattern = /^[0-9]{3}\-?[0-9]{2}\-?[0-9]{4}$/;
          if (formElements[k].value.match(pattern)) {
              alert("Please Do Not Enter SSN Info Into This Form");
              return false;
          }

      }
      return true;
  }