[英]How to validate radio buttons?
我創建了以下表單: http : //jsfiddle.net/baumdexterous/GYNSu/1/
我實現了一個驗證腳本,該腳本適用於許多表單元素,但由於某種原因,它不適用於單選按鈕,因此當前用戶可以在不選擇所需單選按鈕之一的情況下提交表單。
如何使用此現有腳本啟用對單選按鈕的驗證? 非常感謝。
<ul>
<li class="required">
<label>What is the U.S. Capital? Please select your answer below:</label>
<div class="questionsone">
<input name="questionone" type="radio" value="a">a) New York<br>
<input name="questionone" type="radio" value="b">b) Washington DC<br>
<input name="questionone" type="radio" value="c">c) Seattle<br>
<input name="questionone" type="radio" value="d">d) Portland<br>
</div>
</li>
</ul>
更新 :我有這個JavaScript部分,可以與現有驗證一起使用。 試圖弄清楚如何添加一種檢測單選按鈕的方法:
<script>
$(function() {
var root = $("#wizard").scrollable();
// some variables that we need
var api = root.scrollable(),
drawer = $("#drawer");
// validation logic is done inside the onBeforeSeek callback
api.onBeforeSeek(function(event, i) {
// we are going 1 step backwards so no need for validation
if (api.getIndex() < i) {
// 1. get current page
var page = root.find(".page").eq(api.getIndex()),
// 2. .. and all required fields inside the page
inputs = page.find(".required :input").removeClass("error"),
// 3. .. which are empty
empty = inputs.filter(function() {
return $(this).val().replace(/\s*/g, '') == '';
});
// if there are empty fields, then
if (empty.length) {
// slide down the drawer
drawer.slideDown(function() {
// colored flash effect
drawer.css("backgroundColor", "#229");
setTimeout(function() {
drawer.css("backgroundColor", "#fff");
}, 1000);
});
// add a CSS class name "error" for empty & required fields
empty.addClass("error");
// cancel seeking of the scrollable by returning false
return false;
// everything is good
} else {
// hide the drawer
drawer.slideUp();
}
}
// update status bar
$("#status li").removeClass("active").eq(i).addClass("active");
});
// if tab is pressed on the next button seek to next page
root.find("button.next").keydown(function(e) {
if (e.keyCode == 9) {
// seeks to next tab by executing our validation routine
api.next();
e.preventDefault();
}
});
});
</script>
使單選按鈕名稱全部相同。 那把他們聚集在一起。 然后,您要做的就是使第一個被checked="true"
<input name="question" type="radio" value="a" checked="true">a) New York<br>
<input name="question" type="radio" value="b">b) Washington DC<br>
<input name="question" type="radio" value="c">c) Seattle<br>
<input name="question" type="radio" value="d">d) Portland<br>
這使他們發送至少一件事。 否則,您必須檢查輸入的選定值。
同樣,所有文本輸入都可以只具有required
屬性,並且可以確保其中存在某些內容。 HTML5將其作為驗證。
http://www.w3schools.com/tags/att_input_required.asp
編輯這是我剛剛使用jQuery制作的小提琴。 這是您想要的真實驗證。 http://jsfiddle.net/slyfox13/H9Dw2/
您的收音機應該都具有相同的名稱。 在關於的代碼中,您實際上有4個不同的輸入,每個輸入都是它們自己的表單數據參數,而不是4個影響一個表單數據參數的無線電輸入。
輸入名稱不必全部相同,即,然后檢查questionone的值是否不為null以進行驗證
為所有單選按鈕設置相同的名稱,因為單選按鈕可供選擇。
<input name="questionone" type="radio" value="a">a) New York<br>
<input name="questionone" type="radio" value="b">b) Washington DC<br>
<input name="questionone" type="radio" value="c">c) Seattle<br>
<input name="questionone" type="radio" value="d">d) Portland<br>
使用jQuery進行驗證:
if($("input[type=radio,name=questionone]:checked").length >0)
{
/* do something */
}
首先,您需要將單選按鈕名稱更改為相同的內容。 前
<ul>
<li class="required">
<label>What is the U.S. Capital? Please select your answer below:</label>
<div class="questionsone">
<input name="question" type="radio" value="a">a) New York<br>
<input name="question" type="radio" value="b">b) Washington DC<br>
<input name="question" type="radio" value="c">c) Seattle<br>
<input name="question" type="radio" value="d">d) Portland<br>
</div>
</li>
</ul>
這樣您將只能選擇一個。 接下來,您需要創建一個document.ready()函數。 將此代碼添加到您的document.ready()
$( document ).ready(function() {
function RadioTest(){
inputs = document.getElementsByName('question');
for (index = 0; index < inputs.length; ++index) {
if(inputs[index].checked!=true){
alert("radio not selected");
return false;
}
}
}
});
您必須為所有無線電輸入標簽指定相同的名稱。 像這樣
<div class="questionsone">
<input name="qstn1" type="radio" value="a">a) New York<br>
<input name="qstn1" type="radio" value="b">b) Washington DC<br>
<input name="qstn1" type="radio" value="c">c) Seattle<br>
<input name="qstn1" type="radio" value="d">d) Portland<br>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.