带有输入文本的单选按钮答案

【问题标题】：Radio buttons with input text带有输入文本的单选按钮
【发布时间】：2020-12-08 17:08:37
【问题描述】：

我正在创建一个表单，并且旁边有一个带有输入文本的单选按钮。选择单选按钮并在字段文本中不写任何内容的情况下提交表单后，如何显示字段文本留空的警报？谁能给我看一个 Javascript 的例子吗？

function validation(thisForm){
if(!thisForm.this.value.length)
{
  document.getElementById('this-error').innerHTML="Please select at least one option!";
  document.getElementById('this-error').style.display="inline-block";
  return false;
}
return true;
}

 input[type="submit"] {
    padding:10px;
    height:inherit;
    background-color:purple;
    width:100%;
}

<section class="form-section">
<fieldset>
  <legend>This Application is For</legend>
  <div class="input-container">
    <input type="radio" name="this" id="new" value="new">
    <label for="new">New membership</label>
  </div>
    <div class="input-container">
    <input type="radio" name="this" id="add" value="add">
    <label for="add">Addition of dependent(s) to existing policy as listed above</label>
  </div>
    <div class="input-container">
    <input type="radio" name="this" id="upgrade" value="upgrade">
    <label for="upgrade">Upgrade existing plan</label>
  </div>
    <div class="input-container">
      <input type="radio" name="this" id="other" value="other">Other:<input type="text" name="plan"/>
<span class="error-messages" id="this-error"></span>

        </div>
</fieldset>
            </section>
            
            <section class="form-section">

    <input type ="submit" value="submit"/>


  </section>

【问题讨论】：

将您的form 添加到问题详情中

标签： javascript button input text radio

【解决方案1】：

试试这个：

<input type="text" oninvalid="alert('You must fill out the form!');" required>

【讨论】：

【解决方案2】：

如果你使用的是 JS 那么

function check() {
  if(document.getElementById("other").checked === true) {
    if(document.getElementById("other_reason").value === ""){
      alert('error')
    }
  }
}

你的 HTML 看起来像这样：

<input type="radio" name="reason" id="other" value="">Other <input type="text" id="other_reason" />

<button typr="submit" onclick="check()">Submit</button>

基本上，当您单击提交时，您会检查需要输入文本的单选按钮是否为checked，如果是true，则它会验证输入文本的值是否不为空。

【讨论】：