Can't get JavaScript SSN Form Validation to work -

i new js , trying when enters ssn number in field, gives them alert telling them not put ssn number in there.

html:

<form name="card" action="#">     <input type="text" name="field" class="name social" size="60" placeholder="first , 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(name@example.com)">      <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 card">suggest card         <option value="issues card.com">issues card.com         <option value="other">other     </select>      <textarea name="field" class="text social " cols="60" rows="5" placeholder="how can 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 not enter ssn info form");        }       else        {         return false;         alert("yay!")       }      } </script> 

any on cam going wrong helpful. i'd prefer done on "onfocusout" if can give me advice on that.

getelementsbytagname , getelementsbyclassname both return list of elements. list doesn't have value property. each of items on list has value property, not list.

you'll want loop through list of inputs , handle each of them appropriate, e.g.:

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

side note: queryselectorall has better support getelementsbyclassname (ie8 has it, instance, not getelementsbyclassname), if want list using class, you're best off with:

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