How to configure jquery validation error message error

Question

I am trying to create a customized error message with validationEngine plugin

Plugin Link

By default, when you use something like:

<input value="" class="validate[required]" type="text" name="name" id="name"/> 

And you don’t enter anything into it, you will get a message: "* Field is required", which is nice, but I need something like: "* Name is required" ...

I have only this in my .js file:

 $("#Form_Name").validationEngine(); 

Any help would be appreciated, I already have a few days trying to accomplish this ...

Answer 1

All you have to do is change the posts in jquery.validationEngine-en.js (or in any other language you want, if not in English). Keep in mind that all fields of the validation type that you change display the same message.

It is also a place where you can add your own verification and messages.

\ Edit - Ah, I understand what you mean. Well, I take no reason for this, but a company called iPragmaTech has developed a solution to the same problem using the title of the field attribute.

They override the buildprompt function from validationengine and add functions to select a custom error message.

Here is their code below:

 var buildPrompt = $.validationEngine.buildPrompt; $.validationEngine.buildPrompt = function(caller, promptText, type, ajaxed) { // Get the rules to map the message for a method var rulesRegExp = /\[(.*)\]/; var getRules = rulesRegExp.exec($(caller).attr('class')); var str = getRules[1]; var pattern = /\[|,|\]/; var rules = str.split(pattern); //Check if title attribute present in the element //otherwise we shall use default error message if ($(caller).attr('title')) { var getMessages = rulesRegExp.exec($(caller).attr('title')); var str = getMessages[1]; var pattern = /\[|,|\]/; var messages = str.split(pattern); var j = 0; newPrompt = ""; for ( var i = 0; i < rules.length; i++) { rules = $.validationEngine.settings.allrules[rules[i]] if (rules) { if (promptText.indexOf(rules.alertText) != -1) { newPrompt += " <p class="errorMsg">" + messages[j] + " "; } j++; } } promptText = newPrompt; } buildPrompt(caller, promptText, type, ajaxed); } </p> 

They added error messages to the title attribute, and this gives the flexibility to customize the error message for different fields. So, here is an example where you can add an error message:

 <input value="" class="validate[required,custom[noSpecialCaracters],length[0,20]]" name="user" id="user" title="[* Desired username is required,* No special caracters allowed for Desired username,* Desired username should have characters between 0 and 20]" type="text"> 

Hope this solves your problem.

Answer 2

You can set your own error message. In this script, "required" is already running, we are going to create a new rule, "required_2". Step 1. Create a new file in the jquery.validationEngine.js file. how

 case "required_2": required = true; errorMsg = methods._required(field, rules, i, options); break; 

Add add function for required_2

 _required_2: function(field, rules, i, options) { switch (field.prop("type")) { case "text": case "password": case "textarea": case "file": default: if (!($.trim(field.val()))) return options.allrules[rules[i]].alertText; break; case "radio": case "checkbox": var form = field.closest("form"); var name = field.attr("name"); if (form.find("input[name='" + name + "']:checked").size() == 0) { if (form.find("input[name='" + name + "']").size() == 1) return options.allrules[rules[i]].alertTextCheckboxe; else return options.allrules[rules[i]].alertTextCheckboxMultiple; } break; // required for <select> case "select-one": // added by [e-mail] for select boxes, Thank you if (!field.val()) return options.allrules[rules[i]].alertText; break; case "select-multiple": // added by [e-mail] for select boxes, Thank you if (!field.find("option:selected").val()) return options.allrules[rules[i]].alertText; } } 

Step: 2 Now you can change in your language file "jquery.validationEngine-en.js" for English

 "required_2": { // Add your regex rules here, you can take telephone as an example "regex": "none", "alertText": "* This field is required by mohan", "alertTextCheckboxMultiple": "* Please select an option", "alertTextCheckboxe": "* This checkbox is required", "alertTextDateRange": "* Both date range fields are required" }, 

Step: 3 Now almost everything is done, and you can use it in your html fields, for example

 <input value="" class="validate[required_2] text-input" type="text" name="req1" id="req1" data-prompt-position="topRight:-70" /> 

Answer 3

** Try this .. works for me :) PromtText changed if header is set using the following code in jquery.validationEngine.js

if (field.attr ("title")! = null) promptText = field.attr ("title");

. **

  /** * Builds and shades a prompt for the given field. * * @param {jqObject} field * @param {String} promptText html text to display type * @param {String} type the type of bubble: 'pass' (green), 'load' (black) anything else (red) * @param {boolean} ajaxed - use to mark fields than being validated with ajax * @param {Map} options user options */ _buildPrompt: function (field, promptText, type, ajaxed, options) { // create the prompt var prompt = $('<div>'); prompt.addClass(methods._getClassName(field.attr("id")) + "formError"); // add a class name to identify the parent form of the prompt if (field.is(":input")) prompt.addClass("parentForm" + methods._getClassName(field.parents('form').attr("id"))); prompt.addClass("formError"); switch (type) { case "pass": prompt.addClass("greenPopup"); break; case "load": prompt.addClass("blackPopup"); break; default: /* it has error */ //alert("unknown popup type:"+type); } if (ajaxed) prompt.addClass("ajaxed"); // create the prompt content if (field.attr("title") != null) promptText = field.attr("title"); var promptContent = $('<div>').addClass("formErrorContent").html(promptText).appendTo(prompt); // create the css arrow pointing at the field // note that there is no triangle on max-checkbox and radio if (options.showArrow) { var arrow = $('<div>').addClass("formErrorArrow"); //prompt positioning adjustment support. Usage: positionType:Xshift,Yshift (for ex.: bottomLeft:+20 or bottomLeft:-20,+10) var positionType = field.data("promptPosition") || options.promptPosition; if (typeof (positionType) == 'string') { var pos = positionType.indexOf(":"); if (pos != -1) positionType = positionType.substring(0, pos); } switch (positionType) { case "bottomLeft": case "bottomRight": prompt.find(".formErrorContent").before(arrow); arrow.addClass("formErrorArrowBottom").html('<div class="line1"><!-- --></div><div class="line2"><!-- --></div><div class="line3"><!-- --></div><div class="line4"><!-- --></div><div class="line5"><!-- --></div><div class="line6"><!-- --></div><div class="line7"><!-- --></div><div class="line8"><!-- --></div><div class="line9"><!-- --></div><div class="line10"><!-- --></div>'); break; case "topLeft": case "topRight": arrow.html('<div class="line10"><!-- --></div><div class="line9"><!-- --></div><div class="line8"><!-- --></div><div class="line7"><!-- --></div><div class="line6"><!-- --></div><div class="line5"><!-- --></div><div class="line4"><!-- --></div><div class="line3"><!-- --></div><div class="line2"><!-- --></div><div class="line1"><!-- --></div>'); prompt.append(arrow); break; } } // Modify z-indexes for jquery ui if (field.closest('.ui-dialog').length) prompt.addClass('formErrorInsideDialog'); prompt.css({ "opacity": 0, 'position': 'absolute' }); field.before(prompt); var pos = methods._calculatePosition(field, prompt, options); prompt.css({ "top": pos.callerTopPosition, "left": pos.callerleftPosition, "marginTop": pos.marginTopSize, "opacity": 0 }).data("callerField", field); if (options.autoHidePrompt) { setTimeout(function () { prompt.animate({ "opacity": 0 }, function () { prompt.closest('.formErrorOuter').remove(); prompt.remove(); }); }, options.autoHideDelay); } return prompt.animate({ "opacity": 0.87 }); }, /** * Updates the prompt text field - the field for which the prompt * @param {jqObject} field * @param {String} promptText html text to display type * @param {String} type the type of bubble: 'pass' (green), 'load' (black) anything else (red) * @param {boolean} ajaxed - use to mark fields than being validated with ajax * @param {Map} options user options */ _updatePrompt: function (field, prompt, promptText, type, ajaxed, options, noAnimation) { if (prompt) { if (typeof type !== "undefined") { if (type == "pass") prompt.addClass("greenPopup"); else prompt.removeClass("greenPopup"); if (type == "load") prompt.addClass("blackPopup"); else prompt.removeClass("blackPopup"); } if (ajaxed) prompt.addClass("ajaxed"); else prompt.removeClass("ajaxed"); if (field.attr("title") != null) promptText = field.attr("title"); prompt.find(".formErrorContent").html(promptText); var pos = methods._calculatePosition(field, prompt, options); var css = { "top": pos.callerTopPosition, "left": pos.callerleftPosition, "marginTop": pos.marginTopSize }; if (noAnimation) prompt.css(css); else prompt.animate(css); } }, 

Answer 4

 jQuery('#fieldId').validationEngine('showPrompt', 'This a custom msg', 'error', true) 

• error: tooltip style, red

see the source code of this demo

Answer 5

This works <input type="text" value="" class="input full-width validate[required,custom[integer]" data-errormessage-custom-error="your message when wrong syntax" data-errormessage-value-missing="your meesage when field empty" /> For more information: Link