0

我有一个问题errorPlacement。我有一个表，我想在输入无效值的 tr 之后显示错误。错误应该在 tr 和 td 内，才能正确显示。我正在尝试用 td 包装错误元素（tr），它可以工作但只有一次。我输入无效值，然后在 tr 和 td 中出现错误（正确），然后我输入有效值并再次无效，然后错误元素仅插入到 tr。Td 没有出现。
这是我的jQuery代码：

 if ($('.predict_score').length > 0) {
        var $predict_score_form = $('#predict_score_form');
        $predict_score_form.validate({
            errorPlacement: function(error, element) {
                error.insertAfter(element.parent().parent());
                error.wrapInner('<td colspan=100%>');
            },
            errorElement: 'tr'
        }); 

        $('.team_score_field').each(function() {
            $(this).rules('add', {
                digits: true
            });
        });
    }

和html：

<div class="predict_score">
  <form id ="predict_score_form" action="" method='post'>
<table>
    <thead>
        <tr>
            <th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th>
            </tr>
    </thead>
    <tbody>    
        <tr>
            <td >    <span>11.09.2013 13:30</span></td>
            <td >
                Reading FC                                        </td>
            <td>

                <input type="text" value="" name="">
                <strong>:</strong>
                <input type="text" value="" name="">

            </td>    
            <td>
                Stoke City                                        </td>
            <td>-:-</td>
            <td class="right"></td>
        </tr>        
        <tr>
            <td >    <span>11.09.2013 00:00</span></td>
            <td >
                Toronto FC                                        </td>
            <td >    
                <input class="team_score_field" type="text" value="" disabled="disabled" name="">
                <strong>:</strong>
                <input class="team_score_field" type="text" value="" disabled="disabled" name="">    
            </td>    
            <td>
                Chicago Fire                                        </td>
            <td>-:-</td>
            <td class="right"></td>
        </tr>     
        <tr><td colspan="100%"><input type="submit" value="" class="green_btn"></td></tr>
    </tbody>
</table>
  </form>
</div>

任何建议如何解决这个问题？

4

1 回答 1

1

尝试

var $predict_score_form = $('#predict_score_form');
$predict_score_form.validate({
    errorPlacement: function(error, element) {
        error.find('td').attr('colspan', '100%')
        var $etr = error.closest('tr');
        $etr.insertAfter(element.closest('tr'));
    },
    errorElement: 'td',
    wrapper: 'tr',
    submitHandler: function(){
        return false;
    }
});

演示：小提琴

于 2013-09-10T12:27:39.440 回答