Control disabled submit button with Javascript / regex

Question

I want to disable / enable a form submit button btn-vote based on JavaScript. To enable the button, one of 10 radio buttons will need to be selected. If person-10 radio button is selected, the value of the input textbox other-person will need to have a length >1, length <51, contain only letters and spaces (/^[a-zA-Z\s]*$/).

The form is:

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

My javascript is currently:

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

To check if at least one radio button is checked: `(input[name="person"]:checked).length` — Justinas, Dec 19 '17 at 09:25
@Liam Whats your reasoning? I cant allow the user to enter anything except a combination of letters and strings in the 'other' textbox. — PanczerTank, Dec 19 '17 at 09:36
@Justinas radio-10 needs to be handled differently. Simply checking if one button is selected will not work. — PanczerTank, Dec 19 '17 at 09:37

SamWhan · Answer 1 · 2017-12-19T11:40:19.030

Try this:

Edit 2

By my reasoning you ought to be able to select one of the constant names even if the text input is invalid, so I opted out on the pattern approach, and went back to OP's original idea of a separate regex validity test. This also solved the problem with the empty string (from edit 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>

It uses the input pattern-attribute to only allow characters and spaces, and an oninput event to react to the input in real time.

(Note! The oninput is HTML 5 only. Check this answer if you need IE8 or older to work.)

Edit

For some reason the pattern doesn't fail the input test for an empty string, which the ^[a-zA-Z\s]{1,51}$ ought to do, so I had to add a test for empty string to the testInputmethod. Explanation anyone?

Control disabled submit button with Javascript / regex

1 Answers1