2

私は HTML5 の「必須」属性のフォールバックを 95% 書いています。小さな問題があり、私の知る限り、道の終わりに来ました!

機能: 「必須」属性を検出し、ループして、いくつかの方法でユーザーに警告します (onsubmit およびフィールドへのデータの入力)。

問題: フォームをさらに一歩進めて、チェックボックスとラジオ ボタンも必須にしたいと考えています。これにより、各ラジオ/チェックボックスに必須属性を追加する必要があります。ボタンのグループを区別する方法を見つける必要があります。現在、フォームを検証して送信するには、両方のボタンのセットにチェックを入れる/チェックを外す必要があるためです。簡単に言えば、たとえば、3 つの必須ラジオがあり、それぞれにチェックを付ける必要があります。入力をループしているときに、必須ラジオ/チェック済みの 1 つがチェックされていることを検出するにはどうすればよいでしょうか。 name' 属性を使用し、name グループで何も選択されていない場合は、エラーを 1 つだけ警告します。

これが私のループの状態です。入力タイプも検出していることがわかりますが、次のステップが不明なだけです。誰かが助けてくれるほど親切であれば、jsFiddleも以下にあります。どうもありがとう。

// loop through class name required
    $('.required').each(function () {

        // this
        var self = $(this)

        // check shorthand if statement for input[type] detection
        var checked = (self.is(':checkbox') || self.is(':radio')) ? self.is(':not(:checked)') : false

        // run the empty/not:checked test
        if (self.val() === '' || checked) {

            // show error if the values are empty still (or re-emptied)
            // this will fire after it's already been checked once
            self.siblings('.form-error').show()

            // stop form submitting
            e.preventDefault()

            // if it's passed the check
        } else {

            // hide the error
            self.siblings('.form-error').hide()

        }

    })

ここに私の jsFiddle があります: http://jsfiddle.net/zykF9/

4

1 に答える 1

0

クラスセレクターを使用すると、 http://jsbin.com/owokuw/1/editをアーカイブできます 

UPDATE

理解しやすくするために、ここで更新します。

  <input type="radio" name="myradio"  class="myradio" />
<input type="radio" name="myradio"  class="myradio" />
<input type="radio" name="myradio"  class="myradio" />
<input type="radio" name="myradio"  class="myradio" />
  <input type="hidden"   id="selectedRadioYes" />
  <input type="button" id="botton" value="Botton" />

Jクエリ

$(".myradio").click(function(){
$("#selectedRadioYes").val(1);
});




$("#botton").click(function(){
  if($("#selectedRadioYes").val() === "1")
  alert("you can go on"); 
  else
   alert("need select one radio");

});

http://jsbin.com/owokuw/2/edit

于 2013-05-11T16:34:17.937 に答える