Form Doğrulama — Hatayı Ne Zaman Göstermeli?

1
/** ISO 13616 check for Turkish IBANs: 26 characters and mod 97 == 1. */
2
export function isValidIban(input: string): boolean {
3
  const s = input.replace(/\s/g, '').toUpperCase();
4
  if (s.length !== 26 || !s.startsWith('TR')) return false;
5
  const rearranged = s.slice(4) + s.slice(0, 4);
6
  let rem = 0;
7
  for (const ch of rearranged) {
8
    const digits = /[A-Z]/.test(ch) ? String(ch.charCodeAt(0) - 55) : ch;
9
    for (const d of digits) rem = (rem * 10 + Number(d)) % 97;
10
  }
11
  return rem === 1;
12
}

1
export function IbanField({ value, onChange }: { value: string; onChange: (v: string) => void }) {
2
  const [error, setError] = useState<string | null>(null);
3
  const [shownOnce, setShownOnce] = useState(false);   // after the first error, re-check on every change
4

5
  const check = (v: string) => {
6
    const message = isValidIban(v) ? null : 'Bu IBAN geçerli değil; rakamları kontrol et.';
7
    setError(message);
8
    if (message) setShownOnce(true);
9
  };
10

11
  return (
12
    <div>
13
      <label htmlFor="iban">Alıcı IBAN</label>
14
      <input
15
        id="iban"
16
        inputMode="text"
17
        autoComplete="off"
18
        value={value}
19
        aria-invalid={error ? true : undefined}
20
        aria-describedby={error ? 'iban-error' : undefined}
21
        onChange={(e) => {
22
          onChange(e.target.value);              // never wipe what the user typed
23
          if (shownOnce) check(e.target.value);  // fast once an error was shown
24
        }}
25
        onBlur={(e) => check(e.target.value)}    // patient at first: check when the field is done
26
      />
27
      {error && (
28
        <p id="iban-error" role="alert">
29
          <span aria-hidden="true">✕ </span>
30
          {error}
31
        </p>
32
      )}
33
    </div>
34
  );
35
}

1
@Target(ElementType.FIELD)
2
@Retention(RetentionPolicy.RUNTIME)
3
@Constraint(validatedBy = IbanValidator.class)
4
public @interface ValidIban {
5
    String message() default "Geçerli bir IBAN değil";
6
    Class<?>[] groups() default {};
7
    Class<? extends Payload>[] payload() default {};
8
}
9

10
class IbanValidator implements ConstraintValidator<ValidIban, String> {
11

12
    @Override
13
    public boolean isValid(String value, ConstraintValidatorContext context) {
14
        if (value == null) return true;   // @NotBlank decides whether it is required
15
        String s = value.replace(" ", "").toUpperCase(Locale.ROOT);
16
        if (s.length() != 26 || !s.startsWith("TR")) return false;
17
        String digits = (s.substring(4) + s.substring(0, 4)).chars()
18
                .mapToObj(c -> Character.isLetter(c) ? String.valueOf(c - 'A' + 10) : String.valueOf((char) c))
19
                .collect(Collectors.joining());
20
        return new BigInteger(digits).mod(BigInteger.valueOf(97)).intValue() == 1;
21
    }
22
}

1
/** The server checks the same rule: a request that skips the browser is still rejected. */
2
record TransferRequest(
3
        @NotBlank @ValidIban String toIban,
4
        @NotNull @Positive BigDecimal amount) {
5
}