Jquery - 如何在复选框和无线电上删除多个msg返回

时间:2012-06-02 18:42:58

标签: jquery checkbox radio

感谢这个论坛上的人们,我的代码工作中遇到了很大的痛苦,但我遇到了一些问题。

验证复选框/无线电字段时,返回消息会为每个未选中的收音机/复选框提供响应。返回邮件应该只是一个'请填写1433 ' 请填写1433 请填写1433 请填写1433 [组内每个支票/电台的一条信息]

在这个继承的代码中,我实际上会将该字段的名称添加到类中,但是在确定所选的检查/无线电组中没有任何内容被选中后,如何获得一个msg?

我的小提琴http://jsfiddle.net/justmelat/X3CGW/ [选择船只或飞机然后点击检查必填字段btn ]

下面的html / jquery:

    <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<span style="color: red">*</span></td>
                            <td style="height: 33px"><input  id="1125" name="1125" class="1125-required" type="text" />1125</td>
                        </tr>
                        <tr>
                            <td style="height: 33px; width: 178px;">Email<span style="color: red">*</span></td>
                            <td style="height: 33px"><input id="1026" name="1026" class="1026-required" type="text" />1026</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<span style="color: red">*</span></td>
                            <td><select id="1169" name="1169" class="1169-required">
                            <option value="">Select</option>
                            <option value="Cars">Cars</option>
                            <option value="Boats">Boats</option>
                            <option value="Planes">Planes</option>
                            </select>1169</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:<span style="color: red">*</span></label></td>
                            <td style="height: 35px"><input id="1245" class="1245-required" name="1245" type="text" />1245</td>
                        </tr>
                        <tr>
                            <td style="height: 35px; width: 334px">Color:<span style="color: red">*</span></td>
                            <td style="height: 35px">
                            <select id="1433" class="1433-required" name="1433">
    <option value="">Select</option>
                    <option value="Orange">Orange</option>
                            <option value="Blank">Blank</option>
                            <option value="Green">Green</option>
                </select>1433</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<span style="color: red">*</span>:</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
                           >>1433[] </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:<span style="color: red">*</span></td>
                            <td style="height: 35px">
                                                    <input type="radio" name="1834" id="1834" value="None" class="valuetext 1834-required">None
                                                    <input type="radio" name="1834" id="1834" value="All" class="valuetex 1834-required">All
                          &nbsp;&nbsp;|1834[] </td>
                        </tr>
                        <tr>
                            <td style="height: 35px; width: 334px">Approver:</td>
                            <td style="height: 35px">
                                                    <input type="checkbox" name="1149[]" id="1149[]" value"John  Marsh" class="1149[]-not_required"/>John Marsh
                                                    <input type="checkbox" name="1149[]" id="1149[]" value"Phil Collins" class="1149[]-not_required"/>Phil Collins
                                                    <input type="checkbox" name="1149[]" id="1149[]" value"Tom Green" class="1149[]-not_required"/>Tom Green
                           |1149[] </td>
                        </tr>
                        <tr>
                            <td style="height: 35px; width: 334px">Engine:<span style="color: red">*</span></td>
                            <td style="height: 35px">
                                                    <input type="radio" name="1898" id="1898" value="Type 1" class="valuetext 1898-required">Type 1
                                                    <input type="radio" name="1898" id="1898" value="Type 2" class="valuetext 1898-required">Type 2
                          &nbsp;&nbsp;|1898 </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>​

    $("#section-11,#section-12,#section-13,#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() {

        $("#holdErrMsg").empty();
       var chk_requiredButEmpty = $("fieldset:visible").find(":input:checkbox[class*='-required'],:input:radio[class*='-required']").filter(function() {
            return $(this).not(':checked');
        });

        if (chk_requiredButEmpty.length) {
            chk_requiredButEmpty.each(function () {

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

});

1 个答案:

答案 0 :(得分:0)

这是一个稍微修改,首先创建一个空数组。在each循环中,它检查名称是否已在数组中,如果不是,则将错误写入页面并将名称添加到数组

http://jsfiddle.net/X3CGW/6/