JavaScript가 작동하지 않습니다. SSN 양식 유효성 확인이 작동하려면

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(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 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

당신은 ... 함수에서 반환하기 전에 경고를()해야 당신이 원하는 경우 경고() 대화 상자가 표시됩니다.

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; 
    }