Jquery 如何验证无线电部分？

我创建了以下表单：

请填写标有红色边框的空白字段。


您的电子邮件：

你的城市
--请选择--
赫尔辛基
柏林
纽约
美国首都在哪里？

a） 纽约

b） 华盛顿特区

c） 西雅图

d） 波特兰



继续»

以下是现有的验证：

    $(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();
    }
    });
                           });

$（函数（）{
var root=$（“#向导”）.scrollable（）；
//我们需要的一些变量
var api=root.scrollable（），drawer=$（“#drawer”）；
//验证逻辑在onBeforeSeek回调内完成
onBeforeSeek（函数（事件，i）{
//我们将后退一步，因此无需验证
if（api.getIndex（）

---

我能够验证输入部分，并选择下拉表单元素只是罚款。。。但由于某些原因，无法验证radio form元素。有人知道我需要对这段代码做什么才能使无线电验证工作正常吗？谢谢。

您需要修改代码以处理没有值的

无线电输入。这是我对你的过滤函数所做的修改，希望它对你有用

empty = inputs.filter(function() {
             if($(this).attr('type') == 'radio'){
                 if($(this).parent().hasClass('error'))
                      $(this).parent().removeClass('error');  
                 if(!$('input[name='+$(this).attr('name')+']').is(':checked'))
                 {
                   if(!$(this).parent().hasClass('error')){
                      $(this).parent().addClass('error');
                      return true;
                   }    
                 }
                 return false;
             }
             return $(this).val().replace(/\s*/g, '') == '';
});

更新

  $(function () {
      var root = $("#wizard").scrollable();
      var isRadioCheck = false;  //<======================New Var
      // 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 || $('input[type=radio]').is(':checked')) {

              // 1. get current page
              var page = root.find(".page,.qselections").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 () {
                      isRadioCheck = $('input[type=radio]').is(':checked');
                      return $(this).val().replace(/\s*/g, '') == '';
                  });


              //    alert('Empty Value is bool : ' + empty.length + isRadioCheck);
              // if there are empty fields, then
              if (empty.length || !isRadioCheck) { //<======================Conditional Check

                  // 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");
                  $('.qselections').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();
          }
      });
  });

Tats应答和他的
无警报
小提琴涵盖了一切，更容易理解。
您需要修改代码以处理没有值的
无线电输入。这是我对你的过滤函数所做的修改，希望它对你有用

empty = inputs.filter(function() {
             if($(this).attr('type') == 'radio'){
                 if($(this).parent().hasClass('error'))
                      $(this).parent().removeClass('error');  
                 if(!$('input[name='+$(this).attr('name')+']').is(':checked'))
                 {
                   if(!$(this).parent().hasClass('error')){
                      $(this).parent().addClass('error');
                      return true;
                   }    
                 }
                 return false;
             }
             return $(this).val().replace(/\s*/g, '') == '';
});

更新

  $(function () {
      var root = $("#wizard").scrollable();
      var isRadioCheck = false;  //<======================New Var
      // 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 || $('input[type=radio]').is(':checked')) {

              // 1. get current page
              var page = root.find(".page,.qselections").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 () {
                      isRadioCheck = $('input[type=radio]').is(':checked');
                      return $(this).val().replace(/\s*/g, '') == '';
                  });


              //    alert('Empty Value is bool : ' + empty.length + isRadioCheck);
              // if there are empty fields, then
              if (empty.length || !isRadioCheck) { //<======================Conditional Check

                  // 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");
                  $('.qselections').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();
          }
      });
  });

Tats回答和他的
无提示的
小提琴涵盖了一切，更容易理解。
工作演示

无警报版本

希望这能满足您的需要
：）

我已经分别处理了
输入
单选按钮，让您明白

代码

  $(function () {
      var root = $("#wizard").scrollable();
      var isRadioCheck = false;  //<======================New Var
      // 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 || $('input[type=radio]').is(':checked')) {

              // 1. get current page
              var page = root.find(".page,.qselections").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 () {
                      isRadioCheck = $('input[type=radio]').is(':checked');
                      return $(this).val().replace(/\s*/g, '') == '';
                  });


              //    alert('Empty Value is bool : ' + empty.length + isRadioCheck);
              // if there are empty fields, then
              if (empty.length || !isRadioCheck) { //<======================Conditional Check

                  // 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");
                  $('.qselections').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();
          }
      });
  });

$（函数（）{
var root=$（“#向导”）.scrollable（）；
var isRadioCheck=false；//工作演示

无警报版本

希望这能满足您的需要
：）

我已经分别处理了
输入
单选按钮，让您明白

代码

  $(function () {
      var root = $("#wizard").scrollable();
      var isRadioCheck = false;  //<======================New Var
      // 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 || $('input[type=radio]').is(':checked')) {

              // 1. get current page
              var page = root.find(".page,.qselections").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 () {
                      isRadioCheck = $('input[type=radio]').is(':checked');
                      return $(this).val().replace(/\s*/g, '') == '';
                  });


              //    alert('Empty Value is bool : ' + empty.length + isRadioCheck);
              // if there are empty fields, then
              if (empty.length || !isRadioCheck) { //<======================Conditional Check

                  // 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");
                  $('.qselections').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();
          }
      });
  });

$（函数（）{
var root=$（“#向导”）.scrollable（）；
var isRadioCheck=false；//@Trevor为bruvoo喝彩“：）~完成这里：+1也祝你成功！@Ori我不确定你所说的
浏览器弹出窗口是什么意思
弹出窗口说什么？@Ori你是指警报框吗？搜索
警报（
并对它们进行评论。它们会帮助您了解发生了什么。你们都非常了不起。非常感谢您花时间向我解释一切是如何工作的。您详细的解释和乐于帮助的态度给我留下了深刻的印象。最后一个问题：您知道我如何删除屏幕上出现的蓝色背景吗顶部的警告通知？它会闪烁一秒钟然后消失。再次非常感谢！！！@Ori将此行更改为
drawer.css（“backgroundColor”，“fff”）
，而不是
drawer.css（“backgroundColor”，“229”）
@Trevor Cheers Bruvoo`:）~Done here:+1对你也是！@Ori我不知道你所说的
浏览器弹出窗口是什么意思
弹出窗口说什么？@Ori你是说警报框吗？搜索
警报（
并对它们进行注释。它们可以帮助您了解正在发生的事情。你们都非常了不起。非常感谢您花时间向我解释一切是如何工作的。您详细的解释给我留下了深刻的印象