1

私はjsfiddleを機能させようとしていました.Fiddle Linkをしばらく機能させようとしていましたが、Firefoxでは機能しているのに、ChromeやIEでは機能していない理由を理解しましたが、それを修正する解決策がわかりませんどこでも動作します。問題は追加class="name"です。それを削除して、カスタム検証ルールを削除すると、機能します。追加し直しても、そうではありません。

Javascript コードは次のとおりです。

 $.validator.addClassRules({
        name: {
            required: true,
            minlength: 2
        }
    });
    $.validator.addClassRules({
        amt: {
            required: true,
            number: true,
            minValue: 0

        }
    });
    $("#numinjs").change(function () {
        var $table = $('#inj_table');
        var index = $table.find("tr").length;
        var currval = parseInt($("#numinjs").val(), 10);
        var oldtxval = parseInt($("#oldnuminjs").attr("value"), 10);
        var numtimes = 0;
        if (currval > oldtxval) {
            numtimes = currval - oldtxval;
            for (var i = 0; i < numtimes; i++) {
                var $new_row = $table.find("tr:last").clone(false);
                //set the index of the td field.            
                $new_row.find('td')[0].innerHTML = i + 1 + oldtxval;
                //change input id's
                $new_row.find("input:checkbox").attr("disabled", "true").attr("hidden", "true");
                $new_row.find("input:hidden").attr("value", "");
                $new_row.find("input,select").attr("name", function ($) {
                    // break the field name and it's number into two parts
                    var parts = this.name.match(/(\D+)(\d+)$/);
                    // create a unique name for the new field by incrementing
                    // the number for the previous field by 1
                    return parts[1] + (++parts[2]);
                    // repeat for id attributes
                }).attr("id", function ($) {
                    var parts = this.id.match(/(\D+)(\d+)$/);
                    return parts[1] + (++parts[2]);
                }).attr("value", "");

                $new_row.find("div").attr("id", function ($) {
                    var parts = this.id.match(/(\D+)(\d+)$/);
                    return parts[1] + (++parts[2]);
                });
                $table.append($new_row);
            }
            $('#oldnuminjs').attr('value', currval);
        } else if (oldtxval > currval) {
            numtimes = oldtxval - currval;
            for (var j = 0; j < numtimes; j++) {
                $('#inj_table tr').last().remove();
            }
            $('#oldnuminjs').attr('value', currval);
        }

    });
    $("#num_concerns").change(function () {
        var $table = $('#concern_table');
        var index = $table.find("tr").length;
        var currval = parseInt($("#num_concerns").val(), 10);
        var oldtxval = parseInt($("#old_num_concern").attr("value"), 10);
        var numtimes = 0;
        if (currval > oldtxval) {
            numtimes = currval - oldtxval;
            for (var i = 0; i < numtimes; i++) {
                var $new_row = $table.find("tr:last").clone(false);
                //set the index of the td field.            
                $new_row.find('td')[0].innerHTML = i + 1 + oldtxval;
                //change input id's
                $new_row.find("input,select").attr("name", function ($) {
                    // break the field name and it's number into two parts
                    var parts = this.name.match(/(\D+)(\d+)$/);
                    // create a unique name for the new field by incrementing
                    // the number for the previous field by 1
                    return parts[1] + (++parts[2]);
                    // repeat for id attributes
                }).attr("id", function ($) {
                    var parts = this.id.match(/(\D+)(\d+)$/);
                    return parts[1] + (++parts[2]);
                }).attr("value", "");
                $new_row.find("div").attr("id", function ($) {
                    var parts = this.id.match(/(\D+)(\d+)$/);
                    return parts[1] + (++parts[2]);
                });
                $table.append($new_row);
            }
            $('#old_num_concern').attr('value', currval);
        } else if (oldtxval > currval) {
            numtimes = oldtxval - currval;
            for (var j = 0; j < numtimes; j++) {
                $('#concern_table tr').last().remove();
            }
            $('#old_num_concern').attr('value', currval);
        }

    });
    $("#evalanimal").validate();
    $('#reclassify_ckbk').change(function () {
        $('#animal_type').attr('disabled', !this.checked);
    });

次のような html コードを使用します。

<hr />
<br />

<h2> Evaluate Concnerns</h2>

<form action="/evaluateanimal" method="post" name="evalanimal" id="evalanimal">
    <input type="hidden" name="animal_key" id="animal_key" value="keyval" />
    <input type="hidden" name="oldnuminjs" id="oldnuminjs" value="2" />

    <table>

        <tr>
            <tr>
                <td>Number of Concerns:</td>
                <td>
                    <select name="num_concerns" id="num_concerns">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                        <option>11</option>
                        <option>12</option>
                        <option>13</option>
                        <option>14</option>
                        <option>15</option>
                        <option>16</option>
                        <option>17</option>
                        <option>18</option>
                        <option>19</option>
                        <option>20</option>
                        <option>21</option>
                        <option>22</option>
                        <option>23</option>
                        <option>24</option>
                        <option>25</option>
                        <option>26</option>
                        <option>27</option>
                        <option>28</option>
                        <option>29</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="hidden" name="old_num_concern" id="old_num_concern" value="1" />
                    <table name="concern_table" id="concern_table" cellpadding="2">
                        <tr>
                            <th>#</th>
                            <th>Concern</th>
                            <th>Ranking</th>
                        </tr>
                        <tr style="text-align:center;">
                            <td>1</td>
                            <td>
                                <input type="text" name="concern_1" id="concern_1" class="name" />
                            </td>
                            <td>
                                <select name="concern_severity_1" id="concern_severity_1">
                                    <option>Primary</option>
                                    <option>Secondary</option>
                                    <option>Tertiary</option>
                                    <option>Incidental</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
    </table>
    <hr />Number of Injuries:
    <select name="numinjs" id="numinjs">
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
    </select>
    <br />
     <h4>Please Enter the injuries below. Replicates will be ignored</h4>

    <table name="inj_table" id="inj_table" cellpadding="2">
        <tr>
            <th>#</th>
            <th>Delete?</th>
            <th>Name</th>
            <th>Body Part</th>
            <th>Status</th>
        </tr>
        <tr style="text-align:center;">
            <td>1</td>
            <td>
                <input type="hidden" name="orig_key_1" value="Wet/Cold" />
                <input type="checkbox" name="del_injury_1" id="del_injury_1" value="Wet/Cold" />
            </td>
            <td>
                <input type="text" name="injury_name_1" id="injury_name_1" value="Wet/Cold" class="name" />
            </td>
            <td>
                <input type="text" name="injury_body_1" id="injury_body_1" value="" class="name" />
            </td>
            <td>
                <select name="injury_status_1" id="injury_status_1">
                    <option selected="selected">New</option>
                    <option>Improving/Healing</option>
                    <option>Historical</option>
                </select>
            </td>
        </tr>
        <tr style="text-align:center;">
            <td>2</td>
            <td>
                <input type="hidden" name="orig_key_2" value="Bleeding" />
                <input type="checkbox" name="del_injury_2" id="del_injury_2" value="Bleeding" />
            </td>
            <td>
                <input type="text" name="injury_name_2" id="injury_name_2" value="Bleeding" class="name" />
            </td>
            <td>
                <input type="text" name="injury_body_2" id="injury_body_2" value="" class="name" />
            </td>
            <td>
                <select name="injury_status_2" id="injury_status_2">
                    <option selected="selected">New</option>
                    <option>Improving/Healing</option>
                    <option>Historical</option>
                </select>
            </td>
        </tr>
    </table>
    <hr />

    <input type="submit" id="submit" style="float:left;width:auto !important;" value="Submit Evaluation" disabled="disabled" />
</form>

これを修正するにはどうすればよいですか? どんな助けでも大歓迎です！

ありがとう！ジョン

4

1 に答える 1

1

問題はnameそれではなく、id入力ボックス (orig_key_#) に入力ボックスがないため、null.

}).attr("id", function ($) {
   var parts = this.id.match(/(\D+)(\d+)$/);
   if(parts == null) return;                   /* add this */
   return parts[1] + (++parts[2]);

ここを参照してください：http://jsfiddle.net/vol7ron/7yqVw/17/

修正するにはいくつかの方法があります。含むがこれらに限定されません：

  • をチェックしてnull参照しないでくださいparts
  • || ['','']の後に a を追加match()
  • 入力ボックスにを追加しidます (おそらく最も簡単です)。

ただし、この種の作業には、Knockout.js (私の好み) または Ember.js を使用することをお勧めします。そうすれば、JavaScript でより優れた MVVM を使用できます。

于 2013-06-14T22:30:04.343 に答える