如何用默认的broswer报警覆盖jQuery验证插件消息

Question

我正在运行这里的情况。

我有一个窗体，以这种方式适合设计，我不能更新FORM中的de DOM以显示验证消息。

所以，我想知道如何以默认浏览器警报替换自定义jQuery验证插件DOM消息，假设以下代码为例。

$("form").validate({ 
    rules:{ 
     myName:{ 
      required: true, minlength: 2 
     }, 
     myEmail:{ 
      required: true, email: true 
     }, 
     myMessage:{ 
      required: true, minlength: 10 
     } 
    }, 
    messages:{ 
     myName:{ 
      required: "Type you name", 
      minLength: "Your name must be at least 2 characters long" 
     }, 
     myEmail:{ 
      required: "Type you e-mail address", 
      email: "Type a valid e-mail address" 
     }, 
     myMessage:{ 
      required: "Type your message", 
      minLength: Your message must be at least 2 characters long" 
     } 
    } 
}); 

在此先感谢！

Answer 1

• 您上次的自定义消息缺少开头引号"。
• 您的自定义messages应包含参数占位符{0}，它们会自动替换为您的规则的值。
• 您还在自定义messages选项中使用大写L拼写了minlength规则。

试试这个代码，而不是：

$("form").validate({ 
    rules:{ 
     myName:{ 
      required: true, 
      minlength: 2 
     }, 
     myEmail:{ 
      required: true, 
      email: true 
     }, 
     myMessage:{ 
      required: true, 
      minlength: 10 
     } 
    }, 
    messages:{ 
     myName:{ 
      required: "Type your name", 
      minlength: "Your name must be at least {0} characters long" 
     }, 
     myEmail:{ 
      required: "Type your e-mail address", 
      email: "Type a valid e-mail address" 
     }, 
     myMessage:{ 
      required: "Type your message", 
      minlength: "Your message must be at least {0} characters long" 
     } 
    } 
}); 

演示：http://jsfiddle.net/3JTNh/

---

报价OP：“我想知道我怎么能代替定制的jQuery验证插件DOM带有默认浏览器警报的消息“

你的问题很清楚，但动态地改变你的消息的方式将是通过使用rules('add') method动态地改变你的规则，只有指定消息（S）改变......工作演示：http://jsfiddle.net/vkF9r/

* removed *

---

EDIT：

为p呃评论，OP最初是要求一个JavaScript alert()这可以使用这样的errorPlacement回调函数来完成。由于error是一个对象，因此您使用error.text()仅使用其消息。

onkeyup: false, 
    errorPlacement: function (error, element) { 
     alert(error.text()); 
    }, 

我建议，以抵消在每次击键重复警报设置onkeyup到false。 如果您使用的是Safari，请不要尝试此演示，否则你会在无限循环中被卡住（一个缺点在这种情况下使用alert()的）http://jsfiddle.net/kxwYd/

BTW：我不建议使用过的陈旧的JavaScript alert()任何网站设计。

---

更好/推荐：

对于一个更现代的用户体验，你应该同一个jQuery的模式或工具提示插件像Tooltipster整合这一点。

工作实施例：http://jsfiddle.net/SfanE/

下面的代码是从my other answer here ...

首先，初始化Tooltipster插件（with any options）上所有特定form元素，将显示错误：

$(document).ready(function() { 

    // initialize tooltipster on form input elements 
    $('#myform input[type="text"]').tooltipster({ 
     trigger: 'custom', // default is 'hover' which is no good here 
     onlyOne: false, // allow multiple tips to be open at a time 
     position: 'right' // display the tips to the right of the element 
    }); 

}); 

二，沿用Tooltipster's advanced options与success: and errorPlacement: callback functions built into the Validate plugin自动显示和隐藏工具提示如下：

$(document).ready(function() { 

    // initialize validate plugin on the form 
    $('#myform').validate({ 
     // any other options & rules, 
     errorPlacement: function (error, element) { 
      $(element).data('tooltipsterContent', $(error).text()); 
      $(element).data('plugin_tooltipster').showTooltip(); 
     }, 
     success: function (label, element) { 
      $(element).data('plugin_tooltipster').hideTooltip(); 
     } 
    }); 

}); 

Answer 2

建设关什么Sparky的建议，如果你喜欢不包括工具提示插件，你可以效仿这种行为相当紧密使用jQuery UI和一点点CSS。

CSS：

label.error { 
    background-color:white; 
    color:red; 
    position:absolute; 
    border: 1px black solid; 
    padding: 10px; 
    box-shadow: 5px 5px 2px #888; 
    z-index:1; 
} 

的jQuery：

$('#myform').validate({ 
    errorPlacement: function (error, element) { 
     error.insertAfter(element).position({ 
      my: 'left center', 
      at: 'right center', 
      of: element, 
      offset: '5 0' 
     }); 

    }, 
    //the rest of your validate options 
}); 

这里举例：http://jsfiddle.net/SfanE/1/