jQuery validation: change dynamic parameter within message

Question

I have a simple check method based on a input mask defining all allowed char classes:

<input type="text" required inputmask="254" name="test"/>

I wrote a function checking the input value characters against the inputmask and it works fine.

Now, I want to give the user a feedback, thus I defined my message:

$.validator.messages.inputmask = $.validator.format("no, no: input mask is {0}");

But I would prefer to have a function, building the list of accepted characters based on the mask and use this for feedback, i.e. I want to 'manipulate' the parameter:

$.validator.messages.inputmask = myFunc("hey dude, you are just allowed to use {0}", getChars(dont_know_which_param_to_reference_here);

This my JSFiddle: Input Mask Validation (all classes but uppercase accepted)

As you can see the param is nice to check against the mask but can't be used as an user feedback.

Is there any way to do so? Any kind of ideas?

Thanks a lot!

Please show enough code to construct a concise working demo. — Sparky
– Sparky, Commented Sep 3, 2013 at 15:04
FYI, the <input> tag is "self-closing". In other words, there is no such thing as a </input> tag. Simply use <input />. — Sparky
– Sparky, Commented Sep 3, 2013 at 16:15

Sparky · Accepted Answer · 2013-09-03 15:14:37Z

15

Quote OP:

"I want to 'manipulate' the parameter"

There is no way to specifically change error messages dynamically. However, there is a workaround.

By using the .rules('add') method, you can dynamically over-ride your messages with new ones.

// dynamically change message for required rule on input with name="field"
$('input[name="field"]').rules('add', {
    messages: {
        required: "new message for field 1"
    }
});

DEMO: http://jsfiddle.net/F5RUG/

Demo works on page load, however, you can call .rules('add') whenever you wish. If you need to call .rules() on more than one field at a time, you must enclose it within a jQuery .each().

DEMO 2: http://jsfiddle.net/F5RUG/1/

answered Sep 3, 2013 at 15:14

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

John Rumpel Over a year ago

hmmm ... I did not express myself. I want to change the input parameter which is used by default as feedback parameter on errors. take a look @ my fiddle

Sparky Over a year ago

@JohnRumpel, I understand that. However, if the purpose of changing the parameter is to display a new message, you'll have to manually construct your new message and update it as I've outlined above.

Haider Abbas Over a year ago

Hi Sparky, thank you so much for this solution. It took me 3 days to find this solution and it worked. In fact, it was the only one that really worked. Thanks again!

Sparky Over a year ago

@Eatsamulhaq, the comments section is not the place to ask questions and solve problems. This is not a discussion forum. Search SO first, and then post as a new question if needed.

Dmitry · Accepted Answer · 2016-01-10 11:31:30Z

3

You can define your message value, like function and values will be updated each time, when the validate function will be called.

In the same way, you can define dynamic values for validation rules.

var min_items_qt = 0

// Here we dynamically change value of `min_items_qt`

$("#yourForm").validate({
  rules: {
    items_qt: {
      min: function(){ return min_items_qt; }
    }
  },
  messages: {
    items_qt: {
      min: function(){ return "Min items qt. is: " + min_items_qt}
    }
  }
});

answered Jan 10, 2016 at 11:31

Dmitry

413 bronze badges

Comments

Mixchange · Accepted Answer · 2023-02-26 15:55:02Z

I think the plugin may have changed since 2013. Either way, you can make a dynamic message by giving a function as a second argument to the addMethod method.

See http://jsfiddle.net/nw0f8rs5/1/ and below.

// set up the validator and rules
$("#dataform").validate({rules: {mytextfield: true}})

// Add the method with its message
$.validator.addMethod("inputmask", function(value, element, params) {
  // Whatever you want in here. False for demo.
  return false
}, function (validity, element) {
  // get your value
  const theValue = $(element).attr('inputmask')
  return "don't use that: input mask is " + theValue + "."
});

// For this demo, trigger validation right away
$('#mytextfield').valid()

.error {
    color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>

<form id="dataform" method="get" action="#">
    <label>A test for my input field</label>
    <input id="mytextfield" name="mytextfield" value="notAcCepted" inputmask="254" type="text" required>
</form>

I'm also not sure how "mask" works and how you'd want to use it, though, so maybe this isn't the right solution for this problem. Sorry if that's a deal breaker.

Collectives™ on Stack Overflow

jQuery validation: change dynamic parameter within message

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related