Question

我已经实现了本文中最受欢迎的解决方案（jquery tooltip to display validator messages），这个解决方案在很大程度上工作得非常出色 - 除非您在标记为成功之后更改输入...

所以这是表单提交时发生的事情（有错误）：

1.无效字段正确显示为错误。好。

2.将文本输入字段，div更新以包括“已检查”类和图像更改。好。

3.删除文本以使其再次出错。仍显示成功。坏。

继承我的代码：
JS档案

$.validator.setDefaults(
{
  invalidHandler: function(){
    toggleTopMessageBox('error')
  },
  submitHandler: function() { 
    toggleTopMessageBox()
    document.frmTransaction.hidSubmitForm.value='submit';
    document.frmTransaction.submit();
  },
  success: function(element) {
    $(element).addClass("checked");
  },
  errorPlacement: function(error, element) {
    var container = $('<div />');
    container.addClass('inlineValidation');  // add a class to the wrapper        
    error.insertAfter(element);
    error.wrap(container);
    $("<div class='errorImage'></div>").insertAfter(error);   
  },           
  ignore: ":hidden:not(select)"
});

CSS

    div.inlineValidation {
position: relative !important; 
display: inline-block;
top: -2px;

}

div.inlineValidation:hover {
    z-index:1005; 
}

div.inlineValidation label {
  display: none !important;
  vertical-align: middle;
}

div.inlineValidation:hover label.error:not(.checked) {
    display: inline-block !important; 
    position: absolute;
    left:30px; 
    width:150; 
    padding:5px; 
    background-color: #E96D63; 
    border: 3px #E96D63 solid;
    border-radius: 0.5em;
    color: white;
    opacity: 0.85;
}

label.error + div.errorImage {
  background:url("images/error_22x22.png") no-repeat 0px 0px;
  margin:4px;
  display:inline-block !important;
  width:22px;
  height:22px;
  vertical-align: middle;
}

label.checked + div.errorImage {
  background:url("images/success_22x22.png") no-repeat 0px 0px;
  margin:4px;
  display:inline-block !important;
  width:22px;
  height:22px;
  vertical-align: middle;
}

如果我更改errorPlacement以便它只执行类似

的操作

errorPlacement: function(error,element){
     error.insertAfter(element);
   },

然后它的行为正确，但当然我已经失去了div格式/包装。还试过添加像element.removeClass("checked")这样的东西，但这似乎没有什么区别。

试图发布一些有帮助的照片，但我没有代表作为新手。

无论如何，提前感谢任何对我有任何建议的人，非常感谢。

JP

jquery工具提示，用于显示不更改回无效的验证程序消息

0 个答案: