如何解决输入文字的单选按钮
我正在创建一个表单,并且旁边有一个带有输入文本的单选按钮。选择单选按钮并提交表单时未在字段文本中写入任何内容后,如何显示字段文本为空的警报?任何人都可以给我展示一个使用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
,则它会验证输入文本的值是否不为空。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。