Skip to content

Add inline validation for preset fields with regex pattern#11925

Open
Shyam-123pandey wants to merge 3 commits intoopenstreetmap:developfrom
Shyam-123pandey:feature/inline-field-pattern-validation
Open

Add inline validation for preset fields with regex pattern#11925
Shyam-123pandey wants to merge 3 commits intoopenstreetmap:developfrom
Shyam-123pandey:feature/inline-field-pattern-validation

Conversation

@Shyam-123pandey
Copy link

@Shyam-123pandey Shyam-123pandey commented Feb 25, 2026

valid

Add inline validation for fields that define a regex pattern

Summary

This PR adds inline validation support for preset fields that define a pattern (regex).

If a field includes a regex pattern and the entered value does not match it, an informational message is displayed directly below the input field.

Behavior

  • Validation runs on blur / change, not while typing.
  • The message appears only after the user finishes editing the field.
  • If the value becomes valid, the message disappears.
  • This does not block saving.
  • This does not create or modify issues in the issues panel.
  • It only applies to fields that define a pattern.

Why

Some fields may define a regex pattern but currently provide no direct feedback when the value does not match the expected format.

This change improves UX by giving contextual, field-level feedback after editing is complete, while staying consistent with iD’s existing interaction model (no validation on every keystroke).

Scope

  • Changes limited to uiFieldText.
  • No changes to the validation engine.
  • No preset/schema changes.

Closes #10769

Copilot AI review requested due to automatic review settings February 25, 2026 11:50
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds inline, non-blocking validation feedback for text inputs whose preset field definition includes a regex pattern, improving UX by showing/hiding a message as the user types.

Changes:

  • Add a validation message element to uiFieldText’s DOM structure.
  • Validate input values against field.pattern during change() and toggle the message visibility/text accordingly.
Comment on lines +450 to +455
let regex = null;

try {
regex = new RegExp(field.pattern);
} catch (e) {
regex = null;
Copy link

Copilot AI Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

new RegExp(field.pattern) is created on every input event. Since field.pattern is stable per field, consider compiling/caching the RegExp once (and reusing it) to avoid repeated allocations while typing. If you do cache it, make sure to reset lastIndex before testing in case a global/sticky flag is ever present.

Suggested change
let regex = null;
try {
regex = new RegExp(field.pattern);
} catch (e) {
regex = null;
// Compile and cache the RegExp once per field to avoid repeated allocations
// and reuse it on each input event. Recompile only if the pattern changes.
if (!field._compiledPattern || field._compiledPatternSource !== field.pattern) {
try {
field._compiledPattern = new RegExp(field.pattern);
field._compiledPatternSource = field.pattern;
} catch (e) {
field._compiledPattern = null;
field._compiledPatternSource = field.pattern;
}
}
const regex = field._compiledPattern;
if (regex) {
// Ensure consistent behavior if global or sticky flags are ever used
regex.lastIndex = 0;
Copilot uses AI. Check for mistakes.
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will change this to suggested change and then testing.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot suggested caching the compiled RegExp on the field object to avoid re-creating it on each input event.
Since field.pattern is stable, this could reduce allocations while typing. However, this would introduce additional state (_compiledPattern) on the field object.
Would you prefer:

  • Keeping the simpler approach (compile per input, minimal logic), or
  • Caching the RegExp for slight optimization?

I’m happy to adjust based on project conventions.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please suggest me about above changes so that i can move furthur.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. have you wrote this code yourself or got it generated by LLM?

  2. have you looked are there other warning like this supported existing code?

@Shyam-123pandey

This comment was marked as spam.

@Shyam-123pandey
Copy link
Author

Shyam-123pandey commented Feb 26, 2026

Good After noon Sir, Almost things have been resolved just check , I have doubt on one issue as copilot suggested please check above, so suggest for that.

@Shyam-123pandey

This comment was marked as spam.

@Shyam-123pandey

This comment was marked as spam.

var val = utilGetSetValue(input);
const validationMessage = wrap.select('.field-validation-message');
if (!field.pattern && field.key === 'website') {
field.pattern = '^https?://.+';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if this field has no patter, it should not be hardcoded here but defined with other patterns

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants