1

仅出于 UX 增强目的尝试执行简单的表单验证预提交。我遇到的问题.val()是只返回第一个表单字段值而忽略其余部分。

jQuery

        $('#pForm').submit(function(){
            var print = $(".option:checked").val();
            var design = $(".option:checked").val();
            var error = "Please select a design service...";

            if(print == 'p10','p20','p30','p40','p90','p00'
            && design == 'd10','d20','d30','d40','d00') {

               alert(print);
               alert(design);

               return true;

            } else {

               alert(error);
               return false;

            }

        });

HTML（示例代码）

每个无线电都标记如下：

<label><input type="radio" name="design" class="option" data-number="<?php echo $var ?>" value="d40"/></label>
<label><input type="radio" name="design" class="option" data-number="<?php echo $var ?>" value="d30"/></label>
<label><input type="radio" name="design" class="option" data-number="<?php echo $var ?>" value="d20"/></label>

<label><input type="radio" name="print" class="option" data-number="<?php echo $var ?>" value="p40"/></label>
<label><input type="radio" name="print" class="option" data-number="<?php echo $var ?>" value="p30"/></label>
<label><input type="radio" name="print" class="option" data-number="<?php echo $var ?>" value="p20"/></label>

最终结果是我不希望提交表单，除非从打印单选字段和设计单选字段中选择一个值。如果检查失败，我想向error用户显示一条消息。

*上面的一些代码可能是半伪代码感谢您的帮助！:)

4

3 回答 3

2

好的，现在你要做什么更清楚了，那么只需执行此操作以确保每个组中都检查了一个项目：

if (!$(".design:checked").length || !$(".print:checked").length) {
   // something is not selected
}

一旦您确保两者都有一个选定的值，那么您可以获取使用此代码检查的第一个项目的值：

 var print = $(".print:checked").val();
 var design = $(".design:checked").val();
于 2012-10-23T23:45:38.723 回答
2

val() 总是只返回第一个元素的值。 http://api.jquery.com/val/

请参阅此问题以获得使用地图的良好解决方案： Getting array of values from jQuery object

于 2012-10-23T23:46:22.800 回答
-1

你很近。尝试这个。

if((print == '') || (design == '')) {

       //error 
}
于 2012-10-23T23:47:15.360 回答