Question

我有radio button个输入，text field个输入和password field个输入以及一个submit button。我想发生的是，如果我单击submit按钮而不选择或输入这三个表单，则窗口警报将显示“您需要填写（单选按钮，文本字段和密码字段）”那。我该怎么办？

这是我的代码

<form>
  <input type="radio" name="optradio">Menu 1
  <input type="radio" name="optradio">Menu 2 <br>
  <input type="text"><br>
  <input type="password"><br>
  <input type="submit" value="Submit" onclick="alert('Hello! I am an alert box!')">
</form>

Answer 1

您可以尝试使用required属性

<form>
  <input type="radio" name="optradio" required>Menu 1
  <input type="radio" name="optradio">Menu 2 <br>
  <input type="text" required><br>
  <input type="password" required><br>
  <input type="submit" value="Submit">
</form>

Answer 2

您可以拥有自己的功能，并且可以检查值是否存在。示例：

function myFun(){
    if(val1&&val2&&val3){
    }
}

Answer 3

您可以使用Java脚本对此进行验证

function validation(){
  radio_1_value = document.getElementById("radio_1").value;
  radio_2_value = document.getElementById("radio_2").value;
  text_value = document.getElementById("text").value;
  password_value = document.getElementById("password").value;
  if (radio_1_value == '' || radio_2_value == '' || text_value == '' || password_value == ''){
    alert('You need to fill up the (radio button, text field and password field');
  }
}

<form>
  <input type="radio" id="radio_1" name="optradio" required>Menu 1
  <input type="radio" id="radio_2" name="optradio">Menu 2 <br>
  <input type="text" id="text" required><br>
  <input type="password" id="password" required><br>
  <input type="submit" value="Submit" onclick="validation()">
</form>

具有不同功能的提交按钮

3 个答案: