Question

我想在我的表单上找到 当前可见的字段集中的所有必填字段。我会在用户提交表单时实际使用此代码，但是为了进行测试，我使用一个简单的按钮来检查可见字段集，然后查看那些可见字段集中需要的字段[以类名结尾的字段标注 - 更换]。这些字段可以是文本框，无线电，复选框等。然后确定它们是否为空。如果为空，则在我的div中提供消息，告诉用户哪些字段不完整我以为我已经在另一个stackOverflower的帮助下找到了这个代码，但它在我的代码中不起作用。有人可以提供一些见解吗？

我的小提琴： http://jsfiddle.net/justmelat/jVktq/

我的html：

<form method="post" action=""> <div id="holdErrMsg"></div> <fieldset id="mainSection" name="mainSection"> <legend style="color:blue; font-weight:bold">Project Overview Section</legend> <table style="width: 100%"> <tr> <td style="height: 33px; width: 178px;">Name</td> <td style="height: 33px"><input id="1125" name="1125" type="text" /></td> </tr> <tr> <td style="height: 33px; width: 178px;">Email</td> <td style="height: 33px"><input id="1026" name="1026" type="text" /></td> </tr> <tr> <td style="width: 178px">Product Title</td> <td><input id="1089" name="1089" type="text" /></td> </tr> <tr> <td style="width: 178px">Product Type</td> <td><select id="1169" name="1169"> <option value="">Select</option> <option value="Cars">Cars</option> <option value="Boats">Boats</option> <option value="Planes">Planes</option> </select></td> </tr> <tr><td> <button id="btnCatchReqFlds" type="button" name="btn">Check Required Fields</button> </td></tr> </table> </fieldset> <fieldset id="section-11" name="section-11"> <legend style="color:fuchsia; font-weight:bold">Car Details Section</legend> <table cellpadding="2" style="width: 100%"> <tr> <td style="width: 334px; height: 35px"><label>Size:*</label></td> <td style="height: 35px"><input id="1245" class="1245-required" name="1245" type="text" /></td> </tr> <tr> <td style="height: 35px; width: 334px">Color:*</td> <td style="height: 35px"> <select id="1433" class="1433-required" name="1433"> <option value="Orange">Orange</option> <option value="Blank">Blank</option> <option value="Green">Green</option> </select></td> </tr> <tr> <td style="width: 334px">Description:</td> <td> <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td> </tr> </table> </fieldset> <fieldset id="section-12" name="section-12"> <legend style="color:fuchsia; font-weight:bold">Plane Details Section</legend> <table cellpadding="2" style="width: 100%"> <tr> <td style="width: 334px; height: 35px"><label>Size:</label></td> <td style="height: 35px"><input id="1245" name="1245" type="text" /></td> </tr> <tr> <td style="height: 35px; width: 334px">Color*:</td> <td style="height: 35px"> <input type="checkbox" name="1433[]" id="1433[]" value"Orange" class="1433[]-required"/>Orange <input type="checkbox" name="1433[]" id="1433[]" value"Blue" class="1433[]-required"/>Blue <input type="checkbox" name="1433[]" id="1433[]" value"Green" class="1433[]-required"/>Green </td> </tr> <tr> <td style="width: 334px">Description:</td> <td> <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td> </tr> </table> </fieldset> <fieldset id="section-13" name="section-13"> <legend style="color:fuchsia; font-weight:bold">Boat Details Section</legend> <table cellpadding="2" style="width: 100%"> <tr> <td style="width: 334px; height: 35px"><label>Size:</label></td> <td style="height: 35px"><input id="1245" name="1245" type="text" /></td> </tr> <tr> <td style="height: 35px; width: 334px">Color:*</td> <td style="height: 35px"> <input type="radio" name="1834" id="1834" value="None" class="valuetext" class="1834-required">None <input type="radio" name="1834" id="1834" value="All" class="valuetext" class="1834-required">All </td> </tr> <tr> <td style="width: 334px">Description:</td> <td> <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td> </tr> </table> </fieldset><br> <fieldset id="section-1011" name="section-1011"> <legend style="color:green; font-weight:bold">Misc Info Section</legend> <table cellpadding="2" style="width: 100%"> <tr> <td style="width: 334px; height: 35px"><label>Size:</label></td> <td style="height: 35px"><input id="1301" name="1301" type="text" /></td> </tr> <tr> <td style="height: 35px; width: 334px">Color:</td> <td style="height: 35px"> <select id="1302" name="1302"> <option value="Orange">Orange</option> <option value="Blank">Blank</option> <option value="Green">Green</option> </select></td> </tr> <tr> <td style="width: 334px">Description:</td> <td> <textarea id="1303" name="1303" rows="2" style="width: 433px"></textarea></td> </tr> </table> </fieldset> </form>

我的jquery：

$("#section-11").hide(); $("#section-12").hide(); $("#section-13").hide(); $("#section-1011").hide(); var projtype = new Array( {value : 'Cars', sect_id : 'fieldset#section-11'}, {value : 'Planes', sect_id : 'fieldset#section-12'}, {value : 'Boats', sect_id : 'fieldset#section-13'} ); $("select#1169").on('change',function () { var thisVal = $(this).val(); var sect_id =""; //$('fieldset[id!="mainSection"]').hide(); $(projtype).each(function() { $(this.sect_id).hide(); if(this.value == thisVal) { $(this.sect_id).show(); } }); }); $("#btnCatchReqFlds").on('click', function() { var requiredButEmpty = $("fieldset:visible").find('input[class*="-required"], select[class*="-required"]').filter(function() { return $.trim($(this).val()) === ""; }); if ($requiredButEmpty.length) { $requiredButEmpty.each(function () { $("#holdErrMsg").append("Please fill in the " + this.name + "<br />"); }); } return !$requiredButEmpty.length; });

Answer 1

可能超出了您的代码环境，但它可以回答您的问题：

如果使用html5，您只需在所需输入中添加required属性，如下所示：

<input type="text" required />

在你的jQuery中只需验证它们：

var errorList = [];

function validateRequiredFields(){
    $("input").each(function(){
        if($(this).attr("required") && $(this).val() === ""){
            errorList.push($(this).attr("name"));
        }
    });
    showErrors();
}

function showErrors(){
    $("#holdErrMsg").html("Please fill in this fields: " + errorList.toString());
    errorList = [];
}

在提交之前调用validateRequiredFields。

此外，如果要匹配特定模式（即仅限数字），可以在输入中添加pattern属性（如果是文本类型）并尝试匹配正则表达式。即一个10位数的电话号码字段：

<input type="text" required pattern="^[0-9]{0,10}$" />

然后你的validateRequiredFields（）就像：

function validateRequiredFields(){
    $("input").each(function(){
        if($(this).attr("required")){
            if($(this).attr("pattern") && !(new RegExp($(this).attr("pattern"))).test($(this).val())){
                errorList.push($(this).attr("name"));
            }
            else if($(this).val() === ""){
                errorList.push($(this).attr("name"));
            }
        }
    });
    showErrors();
}

Answer 2

首先，你有一个错字。

var requiredButEmpty

需要

var $requiredButEmpty

此外，您无法真正使用该功能来检查复选框和单选按钮，因为您需要查看它们是否已被选中或选中。检查这些值是不行的。

Answer 3

其次，你的选择器找到0个匹配，我会选择：

http://jsfiddle.net/justmelat/jVktq/

您的示例小提琴有0个具有所需类的类。一旦我添加了，你的代码工作正常。

Answer 4

我不知道你们在你的小提琴上运行了什么代码，因为当我尝试运行它们时，上面链接的两个小提琴都会出错。

刚开始代码清理：

if ($requiredButEmpty.length) {
    $requiredButEmpty.each(function () {

        $("#holdErrMsg").append("Please fill in the " + this.name + "<br />");
    });
}

不是必需的。它可以是：

    requiredButEmpty.each(function () {
        $("#holdErrMsg").append("Please fill in the " + this.name + "<br />");
    });

如果没有长度，它将不会运行超过0次。

***另请注意，我已经删除了requiredButEmpty前面的$，因为你要返回一个jquery对象，你不需要用$（var）继续引用它（除非那只是一个错字然后n /米）。

我也不知道这条线是什么

    return !$requiredButEmpty.length;

因为它是一个从事件处理程序调用的匿名函数，所以没有必要返回任何东西，你不会将它返回到任何地方。

我认为lu1s非常正确。唯一的微小变化，如果你没有使用html5，或者你知道你的用户不会使用支持它的浏览器，你可以手动为他们设置一个class =“required”然后只搜索：

$('.required').forEach(function(){
    if ($(this).val==='')
        --push to array
});

Jquery - 在我的可见Fieldsets中查找我需要的字段并显示消息

4 个答案: