JQuery Validation Plugin - how to add error messages to Title Attribute?

I have looked everywhere for the answer to this question and while there are many questions that are similar, none work exactly like I want. I am using JQuery Validator Plugin for a webform. Due to design constraints, I do not want the error message to be appended to the previous element. Currently, I have it working where it adds a specific class to the input that is invalid, using highlight as well as adding a summary to the bottom of the form. No problems there. However, I find that this alone is not enough as the user really still has no idea why the particular spot is invalid. I have really no space to automatically display the error message; however, I read in the documentation that you can add the error message to the title attribute which is what I want to do. Quoted from, site: >An error message displays a hint for the user about invalid elements, and what is wrong. There are three ways to provide error messages. Via the title attribute of the input element to validate, via error labels and via plugin settings (option messages). However, it does not show how to actually add the error message to the title attribute. So, here is what I have so far, what can I do in this situation? FYI: I realize that I will have to add the error messages back in instead of having "" as the message. $(document).ready(function() { $("#popcornOrder").validate({ rules: { fName: "required", lName: "required", street: "required", city: "required", state: "required", zip: {required: true, ziprange: true}, accountNum: "required", email: {required: true, email: true}, pwd: "required", confPwd: {required: true, equalTo: "#pwd"}, payment: "required" }, messages: { fName: "", lName: "", street: "", city: "", state: "", zip: "", accountNum: "", email: "", pwd: "", confPwd: "", payment: "" }, highlight: function(element) { $(element).addClass('errorBorder'); }, unhighlight: function(element) { $(element).removeClass('errorBorder'); }, invalidHandler: function(form, validator) { var errors = validator.numberOfInvalids(); if (errors) { var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You missed ' + errors + ' fields. They have been highlighted'; $("div.error span").html(message); $("div.error").show(); } else { $("div.error").hide(); } }, focusInvalid: false }); }); EDIT: Okay, I did get one step closer: if I add the following line it will add a message to the title attribute (this was just regular ol JQuery), BUT it adds the the message summary to ALL titles. So, the real question then is how to add the specific errors to each of the inputs? $("input").attr("title", message);

以上就是JQuery Validation Plugin - how to add error messages to Title Attribute?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准