http://stackoverflow.com/questions/23003841/jquery-validate-display-error-message-in-div id="nameError"> Is it possible for jQuery Validation Plugin? I have no idea that why I am posting here to get help from you. MY JQUERY CODE IS: $(function () { $.validator.addMethod("regex", function (value, element, regexpr) { return regexpr.test(value); }, "Please enter a valid name."); $("#myForm").validate({ rules: { name: { required: true, regex: /^[A-Za-z]+$/ } } }); }); MY JSFIIDLE Thanks. javascript jquery jquery-validate share|improve this question asked Apr 11 '14 at 4:59 Mr.Happy 1,04231337 1 Have you tried reading the documentation yet? –Sparky Apr 11 '14 at 14:33 add a comment| 3 Answers 3 active oldest votes up vote 0 down vote accepted You may add a check in errorPlacement handler like below: Please note that errorPlacement function is called for each error, if you need more handling on error message, please check for invalidHandler jQuery.validator.setDefaults({ errorPlacement: function(error, element) { if (element.attr("name") == "name" ) //Id of input field error.appendTo('#nameError'); if (element.attr("name") == "anotherInputField" ) //Id of input field error.appendTo('#anotherInputFieldError'); } }); share|improve this answer answered Jul 8 '15 at 23:03 Ken 291 add a comment| up vote 5 down vote Here's a quick sample: http://jsfiddle.net/4PuJL/7/ jQuery.validator.setDefaults({ errorPlacement: function(error, element) { error.appendTo('#nameError'); } }); share|improve th
here for a quick overview of the site Help Center Detailed answers to any questions you might have http://stackoverflow.com/questions/14741688/how-to-display-messages-from-jquery-validate-plugin-inside-of-tooltipster-toolti Meta Discuss the workings and policies of this site About Us http://www.garethelms.org/2012/01/jquery-form-error-plugin/ Learn more about Stack Overflow the company Business Learn more about hiring developers or posting ads with us Stack Overflow Questions Jobs Documentation Tags Users Badges Ask Question x Dismiss Join the Stack Overflow Community Stack Overflow is a community of 4.7 million programmers, error message just like you, helping each other. Join them; it only takes a minute: Sign up How to display messages from jQuery Validate plugin inside of Tooltipster tooltips? up vote 16 down vote favorite 19 I'd like to use the Tooltipster plugin to display form errors generated by the jQuery Validate plugin. jQuery for Validate plugin: $(document).ready(function error message using () { $('#myform').validate({ // initialize jQuery Validate // other options, rules: { field1: { required: true, email: true }, field2: { required: true, minlength: 5 } } }); }); jQuery for Tooltipster plugin: $(document).ready(function () { $('.tooltip').tooltipster({ /* options */ }); // initialize tooltipster }); HTML:
How would I integrate the usage of these two jQuery plugins so that validation errors appear inside the tooltips? jquery jquery-validate tooltip tooltipster share|improve this question edited Sep 29 at 17:18 asked Feb 7 '13 at 0:46 Sparky 64.9k17110189 add a comment| 2 Answers 2 active oldest votes up vote 33 down vote accepted Solutions for Tooltipster versions 2.1, 3.0, & 4.0 are included in this answer. Tooltipster v2.1 First, initialize the Tooltipster plugin (with any options) on all specific form elements that will display errors: $(document).ready(function () { // initialize tooltipster on form input elements $('#myform input[type="text"]').tooltipster({ trigger: 'custom', // default is 'hover' which
decided on a way of displaying validation errors and success messages on forms for my current project. I've turned this into a jQuery form error plugin on GitHub which provides some quick wins : A single function call to display a validation message next to a field. A single function call to remove a validation message and optionally displays a success image in its place. No additional css is required. In the GitHub project you'll find the Index.html which demonstrates a simple form with some validation. Here's a video of the plugin in action : How do I use jquery.formError? First of all you need to know when a form control has invalid data because it's then that you want to call the plugin. I've kept the validation logic in the demo simple so the focus is on the plugin. If you're using Backbone.js I can recommend the excellent backbone.validation plugin as it has the required valid/invalid callbacks you'll need. First you'll need to include the jQuery.formError.js plugin javascript file. Then, to display a validation error message on an input with an id of "name" : $("#name").formError( "Name cannot be greater than 15 characters long"); To remove the validation message when you have successfully revalidated the value : $("#name").formError( {remove:true}); By default removing the validation message will place a validation success image in place of the error. So you'll need an icon for this like the one in the demo. To disable this behaviour : $("#name").formError( { remove:true, successImage: {enabled:false} }); The default image url is just "success.gif" which you can easily modify on a per-call basis : $("#name").formError( { remove:true, successImage: {src:"img/success.gif"} }); The plugin also gives an invalid control the css class invalid. I leave it up to you to decide the visual effect .invalid has on the control. In the demo.css file you'll see that it applies a red border. This css class is removed when you remove the error message. Why not put the validation message underneath the control? It's common for web forms to put their validation messages directly underneath the invalid control. Like this : I've had two problems with this approach : The insertio