Question

  <tr>
      <td>.....</td>
        <td>    
            <div class="...">
                <div class="..." id="..." style="display:block;">
                    <ul id="..." class="..." style="position:relative;">
                        <%
                            for(int i = 0;i < len;i++)
                            {
                                //get a json object
                                if(jsonobj != null)
                                {           
                                    //Get style...id..and some other values....
                        %>              
                                <li class="..." style="display:block;" id="..."> 
                                    <div style="<%=style%>">
                                        <input type="checkbox" id="<%=Id%>" class="..." value="true" <%if(enabled){%> checked="checked" <%}%> onClick="..."/>
                                        <input id="inp_<%=Id%>" type="text" class="..." style="border:none;padding-left:5px;" value="<%=text%>"  title="<%=title%>">
                                    </div>
                                </li>                   
                        <%      }
                            }
                        %>
                    </ul>                                           
                </div>
            </div>
        </td>
    </tr>

我有一个像上面代码一样的表格行。如您所见，有两个输入，一个复选框和一个文本字段。在提交表单时，我想验证文本字段并在右侧显示错误消息，并显示一个小错误图标。但由于输入在表格行中，我无法做到这一点。

我有一个显示工具提示的功能。我只需要将元素的id和消息传递给该函数。我想验证输入字段，显示一个小错误图像并调用工具提示功能，以便在错误图像上显示工具提示。

我希望错误图像显示在所需输入字段旁边，即，如果第3个输入字段被假定为false，则错误应显示在包含输入字段的第3个

旁边。

我该怎么做？

Answer 1

这对jQuery来说是一个简单的任务。请参阅以下示例：

＆＃13;

$(document).ready(function(){
$("#btnSave").click(function(){
$(".txtvalidatorMessage").remove() // remove all messages
var inputs = $(".txtvalidator");
function ShowMessage(message, input){
var messageContainer = $("<div class='txtvalidatorMessage'>"+message+"</div>");
messageContainer.insertAfter(input)// show the message beside the input
}


inputs.each(function(){
var validationType = $(this).attr("validationType");
var require = eval($(this).attr("require"));
switch(validationType)
{
case "NotEmpty":
if ($(this).val() == "" && require == true)
ShowMessage("cant be empty",$(this))

break;

case "Number":
var isnum = /^\d+$/.test($(this).val());
if (!isnum && require == true)
ShowMessage("only number",$(this))

break;

}

});

});


});

＆＃13;

.txtvalidatorMessage{
color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table> 
<tr>
<td>
<input type='text' value="" placeholder='Cant be empty' class='txtvalidator' validationType='NotEmpty' require='true' />
</td>

</tr>

<tr>
<td>
<input type='text' value="" placeholder='only Number' class='txtvalidator' validationType='Number' require='true' />
</td>
<tr>
<td>
<input type='button' value="Validate" id='btnSave'  />
</td>
</tr>
</table>

＆＃13;

验证表行中包含的输入字段

1 个答案: