Client-Side Validation
In this page:
$(form).submit(function (event) {
if (/* invalid */) {
event.preventDefault();
}
});Required Fields
Submission की अनुमति देने से पहले यह check करना कि required fields खाली नहीं हैं, user को immediate, उपयोगी feedback देता है बजाय server तक एक incomplete form पहुँचने देने के।
उदाहरण: Required Fields
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="name" type="text">
<script>
if ($("#name").val().trim() === "") {
console.log("Name is required");
}
</script>
</body>
</html>Email Validation
एक simple regular expression किसी email address का basic shape check कर सकती है -- कुछ text, एक @ symbol, और एक domain जैसा -- हालाँकि यह confirm नहीं कर सकता कि address असल में exist करता है या नहीं।
उदाहरण: Email Validation
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="email" type="text" value="not-an-email">
<script>
const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(pattern.test($("#email").val()));
</script>
</body>
</html>Length Validation
Length checks passwords और messages जैसे fields के लिए उपयोगी हैं जिन्हें characters की minimum या maximum संख्या चाहिए। val().length पढ़ना आपको उसे किसी सीमा से compare करने देता है।
उदाहरण: Length Validation
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="password" type="text" value="abc">
<script>
if ($("#password").val().length < 8) {
console.log("Password too short");
}
</script>
</body>
</html>Validation Messages
Clear, specific validation messages -- exactly बताते हुए क्या गलत है और कहाँ -- forms को top पर एक single generic error से समझने में आसान बनाते हैं।
उदाहरण: Validation Messages
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="email" type="text">
<span id="emailError"></span>
<script>
$("#emailError").text("Please enter a valid email address");
</script>
</body>
</html>Complete Validation
Required-field, format, और length checks को एक validation flow में combine करना आपको submission से पहले हर problem पकड़ने और उन्हें एक साथ report करने देता है।
उदाहरण: Complete Validation
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="name" type="text">
<input id="email" type="text" value="bad">
<script>
const errors = [];
if ($("#name").val().trim() === "") errors.push("Name required");
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test($("#email").val())) errors.push("Invalid email");
console.log(errors);
</script>
</body>
</html>- सिर्फ
$("#name").val() === ""check करना और सिर्फ spaces वाले input को miss कर देना; whitespace को filled न गिनने के लिए पहले.trim()इस्तेमाल करें। - एक email regex लिखना जो बहुत strict या बहुत loose हो और उसे इस बात का proof मानना कि address exist करता है, जबकि client-side checks सिर्फ format test करते हैं।
- अकेले client-side validation पर भरोसा करना, यह भूलते हुए कि users इसे bypass कर सकते हैं, इसलिए server को दोबारा validate करना ज़रूरी है।
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: