HTML ਬਿਲਟ-ਇਨ ਵੈਲੀਡੇਸ਼ਨ ਐਟ੍ਰਿਬਿਊਟਸ ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਗਲਤ ਸਬਮਿਸ਼ਨਸ ਨੂੰ ਬਲਾਕ ਕਰਦਾ ਹੈ ਅਤੇ ਸੁਨੇਹੇ ਦਿਖਾਉਂਦਾ ਹੈ — ਕੋਈ JavaScript ਦੀ ਲੋੜ ਨਹੀਂ।
html
Submit
HTML ਬਿਲਟ-ਇਨ ਵੈਲੀਡੇਸ਼ਨ ਐਟ੍ਰਿਬਿਊਟਸ ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਗਲਤ ਸਬਮਿਸ਼ਨਸ ਨੂੰ ਬਲਾਕ ਕਰਦਾ ਹੈ ਅਤੇ ਸੁਨੇਹੇ ਦਿਖਾਉਂਦਾ ਹੈ — ਕੋਈ JavaScript ਦੀ ਲੋੜ ਨਹੀਂ।
Submit
ਵੈਲੀਡੇਸ਼ਨ ਐਟ੍ਰਿਬਿਊਟਸ: required, min/max, minlength/maxlength, pattern (regex), ਅਤੇ ਟਾਈਪ ਆਪ ਹੀ (email, url, number)। ਸਬਮਿਟ ਤੇ, ਬ੍ਰਾਊਜ਼ਰ ਉਨ੍ਹਾਂ ਨੂੰ ਚੈਕ ਕਰਦਾ ਹੈ, ਜੇ ਕੋਈ ਵੀ ਫੇਲ ਹੋਵੇ ਤਾਂ ਸਬਮਿਸ਼ਨ ਬੰਦ ਕਰਦਾ ਹੈ, ਅਤੇ ਪਹਿਲੇ ਗਲਤ ਫੀਲਡ ਤੇ ਇੱਕ ਨੇਟਿਵ ਬਬਲ ਦਿਖਾਉਂਦਾ ਹੈ।
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
ਤੁਸੀਂ JavaScript ਵਿੱਚ ਵੈਲੀਡੇਸ਼ਨ ਨੂੰ ਪੜ਼ ਸਕਦੇ ਹੋ ਅਤੇ ਕਸਟਮਾਈਜ਼ ਕਰ ਸਕਦੇ ਹੋ:
const input = document.querySelector("input");
input.validity.valueMissing; // true if required and empty
input.validity.typeMismatch; // true if email/url format is wrong
input.checkValidity(); // returns boolean, fires invalid event
input.setCustomValidity("Passwords don't match"); // custom error message
setCustomValidity ਤੁਹਾਨੂੰ ਅਜਿਹੇ ਨਿਯਮ ਸ਼ਾਮਲ ਕਰਨ ਦਿੰਦਾ ਹੈ ਜੋ ਐਟ੍ਰਿਬਿਊਟਸ ਪ੍ਰਗਟ ਨਹੀਂ ਕਰ ਸਕਦੀਆਂ (ਜਿਵੇਂ "ਪਾਸਵਰਡ ਪੁਸ਼ਟੀ ਮੇਲ ਖਾਂਦਾ ਹੈ")।
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
ਹਮੇਸ਼ਾ ਸਰਵਰ ਤੇ ਵੀ ਵੈਲੀਡੇਟ ਕਰੋ — ਕਲਾਈਂਟ ਵੈਲੀਡੇਸ਼ਨ UX ਲਈ ਹੈ; ਯੂਜ਼ਰ ਇਸ ਨੂੰ ਬਾਈਪਾਸ ਕਰ ਸਕਦੇ ਹਨ।
ਨੇਟਿਵ ਵੈਲੀਡੇਸ਼ਨ ਤੁਹਾਨੂੰ ਪਹੁੰਚਯੋਗ, ਲੋਕਾਲਾਈਜ਼ਡ ਗਲਤੀ ਸੁਨੇਹੇ ਅਤੇ ਤਤਕਾਲ ਫੀਡਬੈਕ ਮੁਫਤ ਦਿੰਦੀ ਹੈ।
ਕਸਟਮ ਨਿਯਮਾਂ ਲਈ ਘੋਸ਼ਣਾਤਮਕ ਐਟ੍ਰਿਬਿਊਟਸ ਨੂੰ ਨਿਯੰਤਰਣ ਵੈਲੀਡੇਸ਼ਨ API ਨਾਲ ਮਿਲਾਓ — ਪਰ ਇਸੇ ਨੂੰ ਆਪਣੀ ਇਕਲੌਤੀ ਰੱਖਿਆ ਲਾਈਨ ਨਾ ਬਣਾਓ; ਸਰਵਰ ਨੂੰ ਵੀ ਵੈਲੀਡੇਟ ਕਰਨਾ ਲਾਜ਼ਮੀ ਹੈ।