jQuery Validate - Validate read only field

Question

I have 3 fields on my form: A, B, & C. C is a read only field and its value is derived from the sum of A & B. How can I make jQuery Validate run on field C to make sure its value greater than 0 when the form is submitted?

Right now, if I set validation on Field C, it does not work. If I remove the read-only attribute from the field, the validation runs, but I don't want users changing the value in that field.

Any ideas?

Show the relevant code including the HTML markup for the forms, please. — Sparky, Mar 11 '15 at 15:25
Possible duplicate of [How can I enable jquery validation on readonly fields?](https://stackoverflow.com/questions/26838839/how-can-i-enable-jquery-validation-on-readonly-fields) — mickmackusa, Aug 09 '19 at 01:38

score 0 · Answer 1 · edited Dec 29 '16 at 17:57

0

This code needs to be adjusted to your ID's of fields but it pretty much submit form only if value in ID="C" is greater than 0.

$('form').submit(function() {
   if($('#C').val() === 0) {
      e.preventDefault();
      //send some notification
   }
});

edited Dec 29 '16 at 17:57

TheSharpieOne

25,646
9
66
78

answered Mar 11 '15 at 15:17

MatejG

1,393
1
17
26

The `.submit()` handler defeats the whole entire idea/purpose of using the jQuery Validate plugin, which has its own methods and options for doing this. That leaves only `.val() > 0` as relevant. – Sparky Mar 11 '15 at 16:12

score 0 · Accepted Answer · answered Mar 11 '15 at 16:06

The min rule set to 0 will ensure a field is greater than or equal to zero. You can also write a custom rule using .addMethod() to ensure that it cannot be equal to zero.

$.validator.addMethod("greaterThan", function( value, element, param ) {
    return this.optional( element ) || value > param;
}, "The value must be greater than {0}")

$('#myform').validate({
    rules: {
        myField: {
            greatherThan: [0]
        }
    }
});

The {0} does not represent the 0 character in the message. It represents a placeholder for the first parameter's value. So if the parameter is set to 0, the placeholder will automatically insert the parameter value into your custom message.

However, this plugin can not do validation of readonly fields. When you think about it, it doesn't make any sense to validate something the user cannot directly control.

You, as the developer, are in control of the backend data programmatically, so make sure it's valid in the first place. In other words, if the sum of two fields must always be greater than zero, then you would write a custom method that looks at those two fields to make sure their sum is always greater than zero. Then when the user gets a validation error, it's only on the fields where the user can input their data.

Otherwise, you'll have to make some kind of workaround, where you programmatically copy the result into a hidden field and perform validation on this hidden input instead. Set the ignore option to [] in order to ignore nothing. Otherwise, the plugin will ignore hidden input fields too.

score -1 · Answer 3 · edited May 23 '17 at 11:46

-1

You can add readonly attribute on focusin and then removing it on focusout as stated here: How can I enable jquery validation on readonly fields?

edited May 23 '17 at 11:46

Community

1
1

answered Mar 11 '15 at 15:20

lyisia

144
8

1

Do not post a link to a possible duplicate question as an answer. Flag the question as a duplicate instead. Otherwise, if you think it's not really a duplicate question, then make your answer fully self-contained. In other words, "link-only" answers are generally not acceptable. Thanks. – Sparky Mar 11 '15 at 18:05

jQuery Validate - Validate read only field

3 Answers3