0

我想我的表单上找到当前可见的字段集中的所有必填字段。当用户提交表单时,我实际上会使用此代码,但为了测试,我使用一个简单的按钮来检查可见字段集,然后检查那些可见字段集中需要的字段[由以 -required 结尾的类名注明] . 这些字段可以是文本框、单选框、复选框等。然后确定它们是否为空。如果在我的 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;
});
4

4 回答 4

3

也许超出您的代码上下文,但它可以回答您的问题:

如果使用 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();
}
于 2012-05-03T18:57:04.540 回答
2

首先,你有一个错字。

var requiredButEmpty

需要是

var $requiredButEmpty

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

于 2012-05-03T18:48:59.013 回答
0

其次,您的选择器找到 0 个匹配项,我会选择:

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

您的示例小提琴有 0 个具有所需类的类。一旦我添加了它,您的代码就可以正常工作。

于 2012-05-03T18:52:06.790 回答
0

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

只是从代码清理开始:

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 次。

***另外请注意,当您返回一个 jquery 对象时,我已经删除了 requiredButEmpty 前面的 $,您不需要继续使用 $(var) 引用它(除非这只是一个错字然后 n/m)。

我也不知道这条线是干什么用的

    return !$requiredButEmpty.length;

由于它是从事件处理程序调用的匿名函数,因此无需返回任何内容,因此您不会将其返回到任何地方。


我认为 lu1s 非常正确。唯一的细微变化是,如果您不使用 html5,或者您知道您将拥有不使用支持它的浏览器的用户,您可以手动为他们添加一个 class="required",然后搜索:

$('.required').forEach(function(){
    if ($(this).val==='')
        --push to array
});
于 2012-05-03T19:33:17.997 回答