Middle
INN-veld (10 of 12 cijfers). Toon fout na blur. Verzendknop is uitgeschakeld totdat het formulier geldig is.
sobes.tech AI
Antwoord van AI
Voor het INN-veld met validatie op 10 of 12 cijfers, het tonen van een foutmelding na blur en het uitschakelen van de "Verzenden" knop totdat het formulier ongeldig is, kun je het zo doen (in React):
import React, { useState } from 'react';
function InnForm() {
const [inn, setInn] = useState('');
const [touched, setTouched] = useState(false);
const isValidInn = (value) => {
return /^\d{10}$/.test(value) || /^\d{12}$/.test(value);
};
const handleBlur = () => {
setTouched(true);
};
const isValid = isValidInn(inn);
return (
<form>
<label>
INN:
<input
type="text"
value={inn}
onChange={e => setInn(e.target.value)}
onBlur={handleBlur}
maxLength={12}
/>
</label>
{touched && !isValid && (
<div style={{ color: 'red' }}>INN moet 10 of 12 cijfers bevatten</div>
)}
<button type="submit" disabled={!isValid}>Verzenden</button>
</form>
);
}
export default InnForm;
```\n\nHier:\n- De validatie controleert of INN precies 10 of 12 cijfers bevat.\n- De fout wordt alleen weergegeven nadat het veld de focus heeft verloren (`blur`).\n- De "Verzenden" knop is uitgeschakeld zolang INN niet geldig is.