javascriptのラジオボタンの確認

ラジオボタンの入力を検証する必要があります。つまり、送信ボタンが押され、ラジオボタンが選択されていない場合、 'チェックボックスを選択してください'と警告し、ラジオボタンが選択してフォームを送信するだけで、アラートは必要ありません。javascriptのラジオボタンの確認

これにはHTML CSSとJavaScriptのみを使用できますが、jqueryでは1000倍も簡単ですが、悲しいことにそれを使用できません。

私のHTMLは有効ではありませんが、現在の問題に直接影響しない限り、後で処理します。

<form name="form1" action="#" onsubmit="return validateForm()" method="post"> 

    First time visitor?:<br/> 
      <label for="s1">Yes</label> 
      <input type="radio" id="1" name="yesno" value="1"/> 
      <br/> 
      <label for="s2">No</label> 
      <input type="radio" id="1" name="yesno" value="2"/> 

      <br/>  

    <input type="submit" value="Submit"><br/> 
    </form>

どのポインタもありがとうございます。

出典

2012-04-26 Anonymous

あなたはので、他の1に否定的なコメントの同じものを作り直すためにあなたの質問を削除しましたか？ Btw、無効なマークアップ（重複IDのような）*あなたの現在の問題に直接影響します*。 –

注意：IDは数字で始まるはずではありません – keune

@benji validateForm関数を投稿してください。 –

document.forms[ 'forms1' ].onsubmit = function() { 
    return [].some.call(this.elements, function(el) { 
     return el.type === 'radio' ? el.checked : false 
    }) 
}

コードが動作しているかどうかはわかりません。

出典

2012-04-26 18:21:37

第1回：コードが正しくないことが分かっている場合は、何かをする前に修正する必要があります。

あなたはこのような何かを行うことができます：

function validateForm() { 
    var radios = document.getElementsByName("yesno"); 
    var formValid = false; 

    var i = 0; 
    while (!formValid && i < radios.length) { 
     if (radios[i].checked) formValid = true; 
     i++;   
    } 

    if (!formValid) alert("Must check some option!"); 
    return formValid; 
}

が行動でそれを参照してください：http://jsfiddle.net/FhgQS/

出典

2012-04-26 18:25:38 MatuDuke

非常に良い機能。 –

そのスクリプトは2つ以上のラジオボタンで機能するはずです。あなたのコードを使用していますが、validateForm（）が定義されていないというエラーが発生していますか？あなたはそれを引き起こしていると思いますか？ – Radi

私は問題が何かを発見しました。私はjsFiddleからそれをコピーし、私のコードがエラーを起こす原因となる隠し文字を追加します。ここで詳細なページがありますhttp://stackoverflow.com/questions/4404526/unexpected-token-illegal-in-webkit – Radi

完全な検証例をJavaScriptで：よろしく

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Radio button: full validation example with javascript</title> 
     <script> 
      function send() { 
       var genders = document.getElementsByName("gender"); 
       if (genders[0].checked == true) { 
        alert("Your gender is male"); 
       } else if (genders[1].checked == true) { 
        alert("Your gender is female"); 
       } else { 
        // no checked 
        var msg = '<span style="color:red;">You must select your gender!</span><br /><br />'; 
        document.getElementById('msg').innerHTML = msg; 
        return false; 
       } 
       return true; 
      } 

      function reset_msg() { 
       document.getElementById('msg').innerHTML = ''; 
      } 
     </script> 
    </head> 
    <body> 
     <form action="" method="POST"> 
      <label>Gender:</label> 
      <br /> 
      <input type="radio" name="gender" value="m" onclick="reset_msg();" />Male 
      <br /> 
      <input type="radio" name="gender" value="f" onclick="reset_msg();" />Female 
      <br /> 
      <div id="msg"></div> 
      <input type="submit" value="send>>" onclick="return send();" /> 
     </form> 
    </body> 
</html>

、

フェルナンド

出典

2013-10-23 20:11:32 Fernando

が動作しています。ありがとう.. +1 .. –

あなたを歓迎します;-) – Fernando

上記のJavascriptソリューションに加えて、マークアップの必要に応じてラジオボタンをマークすることで、HTML 5ソリューションを使用することもできます。これにより、Javascriptの必要がなくなり、ブラウザがあなたのために仕事をするようになります。

これを行う方法の詳細については、HTML5: How to use the "required" attribute with a "radio" input fieldを参照してください。

出典

2016-06-29 16:16:34

<form action="" method="post" name="register_form" id="register_form" enctype="multipart/form-data"> 

    <div class="text-input"> 
     <label>Gender: </label> 
     <input class="form-control" type="radio" name="gender" id="male" value="male" /> 
     <label for="male">Male</label> 
     <input class="form-control" type="radio" name="gender" id="female" value="female" /> 
     <label for="female">Female</label> 
    </div> 
    <div class="text-input" align="center"> 
     <input type="submit" name="register" value="Submit" onclick="return radioValidation();" /> 
    </div> 

</form> 

<script type="text/javascript"> 
    function radioValidation(){ 

     var gender = document.getElementsByName('gender'); 
     var genValue = false; 

     for(var i=0; i<gender.length;i++){ 
      if(gender[i].checked == true){ 
       genValue = true;  
      } 
     } 
     if(!genValue){ 
      alert("Please Choose the gender"); 
      return false; 
     } 

    } 
</script>

出典：http://chandreshrana.blogspot.in/2016/11/radio-button-validation-in-javascript.html

出典

2016-11-14 11:44:40 Chandresh

javascriptのラジオボタンの確認

答えて

関連する問題