HTMLのチェックボックスの妥当性チェック

フォームを持っていますが、チェックボックスやラジオなどの4つのオプションがあります。HTMLのチェックボックスの妥当性チェック

複数のオプションを選択したいが、1つは必須です。

JS/jQueryでも可能ですが、HTML/CSSベースのソリューションが必要です。

2015-11-21 om.

物事を検証する方法でありますあなたはjavascriptなしのソリューションが必要な場合は？ – Arg0n

HTML5にはこの機能があります。[HTML5： "必須"属性を "ラジオ"入力フィールドで使用する方法]（http://stackoverflow.com/questions/8287779/html5-how-to-use-the -required-a-radio-input-field） –

複数の入力をチェックできるようにするには、チェックボックスを使用する必要があります。〜（彼らは異なる名前のラジオボタンかもしれないが、あなたは一度チェックし、それらをオフにすることができません。）

だからgeneral sibling selector（使用して、いずれかがチェックされた場合にのみ、ボタン送信チェックボックスを使用して、表示さ）：

input[type="Submit"] { 
 
    display: none; 
 
} 
 

 
input:checked ~ input[type="Submit"] { 
 
    display: inline; 
 
}

<input id="c1" type="checkbox"><label for="c1">First</label><br> 
 
<input id="c2" type="checkbox"><label for="c2">Second</label><br> 
 
<input id="c3" type="checkbox"><label for="c3">Third</label><br> 
 
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br> 
 
<input type="Submit">

あなたが無効になっ送信ボタンの外観をしたい場合は、無効になっている第二のボタンを追加します。

入力がクリックされていない場合は、無効な送信ボタンのみを表示します。 1つまたは複数の入力がクリックされたときに、有効なだけ送信ボタンを示しています@Rickヒッチコックの答えにさらに

input[type="Submit"]:not([disabled]) { 
 
    display: none; 
 
} 
 

 
input:checked ~ input[type="Submit"]:not([disabled]) { 
 
    display: inline; 
 
} 
 

 
input:checked ~ input[disabled] { 
 
    display: none; 
 
}

<input id="c1" type="checkbox"><label for="c1">First</label><br> 
 
<input id="c2" type="checkbox"><label for="c2">Second</label><br> 
 
<input id="c3" type="checkbox"><label for="c3">Third</label><br> 
 
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br> 
 

 
<input type="Submit" disabled> 
 
<input type="Submit">

出典

2015-11-21 11:28:18

_/\\ _ simply awesome – Arjun

2番目のアプローチタブを使用して無効なフォームを送信してスペースを移動したり押したりすることは可能です。 – falsarella

@falsarella、抜群のポイント！ Submitボタンに負のtabindexを与えるように編集しました。 –

次のものは必須ですが、次のものを使用できます。

<input type="radio" name="name" required>

必須ではないものは、チェックした場合にはテストされません。

出典

2015-11-21 11:25:11

指定した名前のラジオボタンを1つだけ選択できます。 –

あなたはこれではないすべてのブラウザがするので、フォームが、私はjava-scriptをお勧めしますチェックボックスがchecked.Althoughせずに提出してはならないことをブラウザに指示

同様

<input type="checkbox" required name="your_checkbox_name">

required属性を使用して、HTML5でこれを行うことができますこれを認識することができます。あなたが使用することができ

それとも

あなたはコメントに@RickHitchcockによって示唆されているように、少なくとも1つのチェックボックスが選択されているかどうかを検出したい場合は、

span { 
 
    display: inline; 
 
    color: red; 
 
} 
 
input[type="Submit"], 
 
input:checked ~ span { 
 
    display: none; 
 
} 
 
input:checked ~ input[type="Submit"] { 
 
    display: inline; 
 
}

<form action="#" method="post"> 
 
    <input type="checkbox" />Checkbox 1 
 
    <br /> 
 
    <input type="checkbox" />Checkbox 1 
 
    <br /> 
 
    <input type="checkbox" />Checkbox 1 
 
    <br /> 
 
    <input type="submit" value="Submit" /><span>! Please check at least one checkbox</span> 
 

 
</form>

出典

2015-11-21 11:27:22

この特定の入力がチェックされていない限り、フォームを送信できませんでした。 –

@RickHitchcockええ、私はそれがOPが望んだことだと思います。 –

私はOPがチェックボックスグループを要求していると確信しています。 "1つ以上を選択"ではなく、 "この特定のものを1つ以上選択しないでください" – Quentin

を、私はあなたがユーザーにボタンを表示したいだろうと思います送信しますが、チェックボックスの1つがチェックされるまで無効になります。

もしそうなら、あなたは（すべての近代的なブラウザで：http://caniuse.com/#feat=pointer-events）pointer-eventsを使用することができ、このように：

input[type="Submit"] { 
 
    opacity:0.5; 
 
    pointer-events:none; 
 
    /* animation added for fancy ;) */ 
 
    transition:all .2s ease; 
 
} 
 

 
input:checked ~ .button-wrapper input[type="Submit"] { 
 
    opacity:1; 
 
    pointer-events:all; 
 
} 
 

 
.button-wrapper { 
 
    position:relative; 
 
    display:inline-block; 
 
} 
 

 
.button-wrapper:before { 
 
    content:""; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    z-index:1; 
 
} 
 

 
input:checked ~ .button-wrapper:before { 
 
    display:none; 
 
}

<input id="c1" type="checkbox"><label for="c1">First</label><br> 
 
<input id="c2" type="checkbox"><label for="c2">Second</label><br> 
 
<input id="c3" type="checkbox"><label for="c3">Third</label><br> 
 
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br> 
 
<div class="button-wrapper"> 
 
    <input type="Submit" tabindex="-1"> 
 
</div>

編集それがするので、私は.button-wrapper:beforeに "マスク" を加え、古いブラウザで動作します。

出典

2015-11-24 08:00:29

'pointer-events'はIE10以降では動作しません。ユーザーがIE10でブラウズしている場合、チェックボックスをチェックせずにボタンをクリックすることができます。 – rblarsen

@rblarsen、ご意見ありがとうございます。私は古いものをサポートするために私の答えを更新しました。私は、 'ポインタイベント'が '現代のブラウザ 'で動作し、' caniuse'リンクが追加されたことに言及しました。また、彼はとにかく（サーバーは少なくとも）ボタンを隠していてもフォームを送信するのは問題ではないとにかく、送信イベントを検証する必要があります） –

'IE10以下で動作しない' pointer-events'をJS回避策：http://codepen.io/jonathan/pen/BriCb .. IE11ではポインタイベントを許可しますが、リンク 'display'プロパティが' block'または 'inline-block'に設定されている場合に限ります。 –

これを試してみてください。

<input id="c3" type="checkbox" required><label for="c3">Third</label><br> 
<input id="c4" type="checkbox" required><label for="c4">Fourth</label><br>

それとも、HTMLのチェックボックスを検証するために、この使用してjQueryのを試すことができます。

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Makes "field" always required. Nothing and blanks are invalid. </title> 
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css"> 

</head> 
<body> 
<form id="myform"> 
<label for="field">Required: </label> 
<input type="text" class="left" id="field" name="field"> 
<br/> 
<input type="submit" value="Validate!"> 
</form> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js">  </script> 
<script src="http://jqueryvalidation.org/files/dist/additional- methods.min.js"></script> 
<script> 
// just for the demos, avoids form submit 
jQuery.validator.setDefaults({ 
    debug: true, 
    success: "valid" 
}); 
$("#myform").validate({ 
    rules: { 
field: { 
    required: true 
} 
    } 
}); 
</script> 
</body> 
</html>

requiredは、HTMLのはなぜJavaScriptで質問をタグ

出典

2015-11-30 02:37:41

私の質問を正しく読んだことがありますか？「複数のオプションを選択したいですが、**は必須です**」これらのすべてが強制的なものではない... –

HTMLのチェックボックスの妥当性チェック

答えて

関連する問題