控制已禁用提交按钮与Javascript /正则表达式

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>

我的javascript目前是：

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最初的单独的正则表达式有效性测试的想法。这也解决了空字符串的问题（来自编辑1;）。

---

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>

它使用input pattern-attribute仅允许字符和空格，并使用oninput事件实时响应输入。

（注意！oninput仅限HTML 5。如果您需要IE8或更早版本，请查看this answer。）

编辑

由于某种原因，模式不会失败输入测试空字符串，^[a-zA-Z\s]{1,51}$应该这样做，所以我不得不为testInputmethod添加空字符串的测试。有人解释吗？