输入文字的单选按钮

问题描述

我正在创建一个表单，并且旁​​边有一个带有输入文本的单选按钮。选择单选按钮并提交表单时未在字段文本中写入任何内容后，如何显示字段文本为空的警报？任何人都可以给我展示一个使用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>

解决方法

尝试一下：

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

,

如果您使用的是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，则它会验证输入文本的值是否不为空。