[Resolved] Restrict number field to entries of 1-5, single digit

[Author]

Posts

[lindsayH]

I am trying to use the Star Rating on a Form. I've deduced that I need to use a number field to use the Star Rating block on the front end.

How do I restrict data entry on the post form to just the numbers 1, 2, 3, 4 OR 5 and to be only one character entry?

Many thanks.

[Nigel]

The HTML input element provides attributes to specify type and max and min; you could update the input to specify a type of "number", a min of "1" and max of "5".

hidden link

The form uses shortcodes to generate the input field and doesn't provide a way to specify those attributes.

One alternative would be to use some JavaScript (or JQuery) to manipulate the input and set those attributes.

Another would be to use the advanced form editor. Inspect the markup of the generated form on the front end and copy and paste the relevant input into the form editor, replacing the shortcode used to generate it, and manually set the attributes as required.

[lindsayH]

I have added the below code to the JS editor of the post form, but on the front end I can still enter an 8 (for example).

What am I doing wrong?

jQuery(document).ready(function() {
    jQuery("input[name='wpcf-star-rating']").attr({        
      "min" : 1          // substitute your own
      "max" : 5          // values (or variables) here
    });
});

[Shane]

Hi Lindsay,

Can you send me a link to the form that you want to restrict the number field for ?

Thanks,
Shane

[lindsayH]

Hi Shane, I'll need to send you login as it's under development at the moment. Can you allow me to send you confidential information? Many thanks, Lins

[Shane]

Hi Lindsay,

Here are the private fields.

Thanks,
Shane

[Shane]

Hi Lindsay,

This should be working now.

The problem was that there was a missing comma in your code. Here is the updated version of the code.

jQuery(document).ready(function() {
    jQuery("input[name='wpcf-star-rating']").attr({        
      "min" : 1,         // substitute your own
      "max" : 5          // values (or variables) here
    });
});

Thanks,
Shane

[lindsayH]

Great, works perfectly.
My issue is resolved now. Thank you!