帶有輸入文本的單選按鈕

Question

我正在創建一個表單，並且旁邊有一個帶有輸入文本的單選按鈕。 選擇單選按鈕並在字段文本中不寫任何內容的情況下提交表單后，如何顯示字段文本留空的警報？ 誰能給我看一個 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>

Answer 1

嘗試這個：

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

Answer 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 ，則驗證輸入文本的值是否不為空。