Javascript/regex로 제어 사용 중지 버튼

Question

JavaScript를 기반으로 양식 제출 버튼 btn-vote을 사용/사용 중지하려고합니다. 버튼을 활성화하려면 10 개의 라디오 버튼 중 하나를 선택해야합니다. person-10 라디오 버튼이 선택된 경우 입력 텍스트 상자 other-person의 값은 길이가 1보다 길고 길이가 < 51이어야하며 문자와 공백 만 포함해야합니다 (/^[a-zA-Z \ s] * $ /).

양식은 다음과 같습니다

<form id= "personvoteform" name="vote" action="{{ url_for('comparePersons') }}" method="post"> 
<div class="radio"> 
<input id="person1" type="radio" name="person" value="Name 1"><label for="person1">Name 1</label><br> 
<input id="person2" type="radio" name="person" value="Name 2"><label for="person2">Name 2</label><br> 
<input id="person3" type="radio" name="person" value="Name 3"><label for="person3">Name 3</label><br> 
<input id="person4" type="radio" name="person" value="Name 4"><label for="person4">Name 4</label><br> 
<input id="person5" type="radio" name="person" value="Name 5"><label for="person5">Name 5</label><br> 
<input id="person6" type="radio" name="person" value="Name 6"><label for="person6">Name 6</label><br> 
<input id="person7" type="radio" name="person" value="Name 7"><label for="person7">Name 7</label><br> 
<input id="person8" type="radio" name="person" value="Name 8"><label for="person8">Name 8</label><br> 
<input id="person9" type="radio" name="person" value="Name 9"><label for="person9">Name 9</label><br> 
<input id="person10" type="radio" name="person" value="Other"> 
<input id="other-person" type="text" name="person_other" placeholder="Other Person" onClick="selectRadio()"/> 
</div> 
<br> 
<div class="Aligner-center"> 
<button id="btn-vote" type="submit" value="Submit" class="black-btn" disabled>VOTE</button> 
</div> 
</form> 

내 자바 스크립트는 현재 :

var form = document.getElementById("personvoteform"); 
var submitbtn = document.getElementById("btn-vote"); 

var person1 = document.getElementById("person1"); 
var person2 = document.getElementById("person2"); 
var person3 = document.getElementById("person3"); 
var person4 = document.getElementById("person4"); 
var person5 = document.getElementById("person5"); 
var person6 = document.getElementById("person6"); 
var person7 = document.getElementById("person7"); 
var person8 = document.getElementById("person8"); 
var person9 = document.getElementById("person9"); 
var person10 = document.getElementById("person10"); 

var other = document.getElementById("other-person"); 

form.addEventListener('change', function()) { 
    if(person1.checked){ 
     submitbtn.disabled = false; 
    }else if(person2.checked){ 
     submitbtn.disabled = false; 
    }else if(person3.checked){ 
     submitbtn.disabled = false; 
    }else if(person4.checked){ 
     submitbtn.disabled = false; 
    }else if(person5.checked){ 
     submitbtn.disabled = false; 
    }else if(person6.checked){ 
     submitbtn.disabled = false; 
    }else if(person7.checked){ 
     submitbtn.disabled = false; 
    }else if(person8.checked){ 
     submitbtn.disabled = false; 
    }else if(person9.checked){ 
     submitbtn.disabled = false; 
    }else if(person10.checked){ 
     if(other.length > 1 && other.length < 51){ 
      submitbtn.disabled = false; 
     } else { 
      submitbtn.disabled = true; 
     } 
    } 
} 

Answer 1

이 시도 :

---

편집 2

을함으로써 내 추론 당신은 상수 이름 중 하나를 선택할 수 있어야합니다. 그래도 텍스트 입력이 유효하지 않아도 pattern 접근 방식을 선택 해제하고 OP 정규 독점 테스트의 OP 아이디어로 되돌아갔습니다. 이것은 또한 빈 문자열 (edit 1;에서 나온 문제)도 해결했습니다.

그것만 캐릭터와 공백을 허용하도록 inputpattern -attribute 사용

var form = document.getElementById("personvoteform"), 
 
    submitbtn = document.getElementById("btn-vote"), 
 
    other_text = document.getElementById("other-text"), 
 
    other_radio = document.getElementById("other-radio"); 
 

 
function onFormChange() { 
 

 
    if(event.target.id.match(/^person/)) { 
 
    submitbtn.disabled = false; 
 
    } 
 
} 
 

 
function testInput() { 
 
    var inputValid=other_text.value.match(/^[a-zA-Z\s]{1,51}$/); 
 
    
 
    other_radio.checked=inputValid; 
 
    submitbtn.disabled=!inputValid; 
 
}

<form id= "personvoteform" 
 
     name="vote" 
 
     action="{{ url_for('comparePersons') }}" 
 
     method="post" 
 
     onchange="onFormChange()"> 
 
    <div class="radio"> 
 
    <input id="person1" type="radio" name="person" value="Name 1"><label for="person1">Name 1</label><br> 
 
    <input id="person2" type="radio" name="person" value="Name 2"><label for="person2">Name 2</label><br> 
 
    <input id="person3" type="radio" name="person" value="Name 3"><label for="person3">Name 3</label><br> 
 
    <input id="person4" type="radio" name="person" value="Name 4"><label for="person4">Name 4</label><br> 
 
    <input id="person5" type="radio" name="person" value="Name 5"><label for="person5">Name 5</label><br> 
 
    <input id="person6" type="radio" name="person" value="Name 6"><label for="person6">Name 6</label><br> 
 
    <input id="person7" type="radio" name="person" value="Name 7"><label for="person7">Name 7</label><br> 
 
    <input id="person8" type="radio" name="person" value="Name 8"><label for="person8">Name 8</label><br> 
 
    <input id="person9" type="radio" name="person" value="Name 9"><label for="person9">Name 9</label><br> 
 
    <input id="other-radio" type="radio" name="person" value="Other"> 
 
    <input id="other-text" 
 
      type="text" 
 
      name="person_other" 
 
      placeholder="Other Person" 
 
      oninput="testInput()" 
 
      onfocus="testInput()" 
 
      /> 
 
    </div> 
 
    <br> 
 
    <div class="Aligner-center"> 
 
    <button id="btn-vote" type="submit" value="Submit" class="black-btn" disabled>VOTE</button> 
 
    </div> 
 
</form>

---

및 oninput 이벤트는 실시간으로 입력에 반응한다.

(참고하세요 oninput는 HTML 5 만. 당신이 일을 IE8 이상을 필요로하는 경우 this answer을 확인하십시오.)

어떤 이유로 편집

에 대한 입력 테스트를 실패하지 않는 패턴 ^[a-zA-Z\s]{1,51}$해야 할 빈 문자열, 그래서 난 testInput 메서드에 빈 문자열에 대한 테스트를 추가했다. 설명 누구?