In Knockout.js, client-side and server-side validations are important in ensuring data integrity and providing a smooth user experience. Here's a breakdown of when to use each:
Client-Side Validation
Client-side validation is performed in the user's browser before the data is sent to the server. This type of validation is useful for providing immediate feedback to users, enhancing the user experience by preventing unnecessary server requests, and reducing server load.
When to use client-side validation:
- Immediate Feedback: When you want to provide instant feedback to the user as they fill out a form. For example, check whether an email address is in a valid format or a required field is filled.
- Basic Checks: For simple validation rules such as required fields, data type checks (e.g., ensuring a field contains a number), and string length constraints.
- Performance: To reduce the number of server requests, especially when the application expects high user interaction.
Example in Knockout.js:
validation.js file
// Initialize Knockout validation
ko.validation.init({
registerExtenders: true, // Register custom validation rules
messagesOnModified: true, // Show validation messages as soon as a field is modified
insertMessages: true, // Insert validation messages next to the input elements
parseInputAttributes: true, // Parse HTML5 input attributes for validation rules
errorClass: 'text-danger fw-semibold', // CSS class for validation error messages
messageTemplate: null // Use default message template
}, true);
// Define the ViewModel
function AppViewModel() {
var self = this;
// Define observables for form fields with validation rules
self.name = ko.observable("").extend({
required: { message: "Name is required." },
minLength: { params: 2, message: "Name must be at least 2 characters." },
maxLength: { params: 25, message: "Name must be at most 25 characters." }
});
self.email = ko.observable("").extend({
required: { message: "Email is required." },
email: { message: "Invalid email address." }
});
self.PhoneNumber = ko.observable().extend({
required: { message: "Phone Number is required." },
pattern: { params: '^[0-9]{8,}$', message: 'Phone Number does not match the pattern' }
});
self.CountryList = ko.observableArray(['Morocco', 'India', 'USA']);
self.Country = ko.observable().extend({
required: { message: "Country is required." }
});
self.Address = ko.observable().extend({
required: { message: "Address is required." }
});
// Define the submit function
self.submitForm = function () {
// Check if the form is valid
if (self.errors().length === 0) {
// Gather form data
var formData = {
name: self.name(),
email: self.email(),
phone_number: self.PhoneNumber(),
country: self.Country(),
address: self.Address(),
};
// Display form data
window.alert(formData);
// Log the form data (or send it to the server)
console.log("Form submitted with:", formData);
} else {
// Show validation errors
self.errors.showAllMessages();
}
// Prevent actual form submission
return false;
};
// Initialize validation
self.errors = ko.validation.group(self);
}
// Apply bindings
ko.applyBindings(new AppViewModel());
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Meta tags for character set and viewport configuration -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title of the webpage -->
<title>Bootstrap demo</title>
<!-- Link to Bootstrap CSS for styling -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Link to Knockout.js library for MVVM pattern support -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"
integrity="sha512-vs7+jbztHoMto5Yd/yinM4/y2DOkPLt0fATcN+j+G4ANY2z4faIzZIOMkpBmWdcxt+596FemCh9M18NUJTZwvw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.4/knockout.validation.min.js"
integrity="sha512-b99MDNv5TqiZtPKH2UeHzDAVydmgrOJEPtaPPEF8AgV86eYyqINFI/K7/7f0+R4WNTAVv8KvvpjwfOYHv5rd5g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<!-- Container class for Bootstrap styling -->
<body class="container">
<div class="my-4">
<h5><strong>Validation Form</strong></h5>
<hr />
<form class="row g-3" data-bind="submit: submitForm">
<div class="col-12 col-lg-6">
<label class="form-label fw-bold" for="name">Name</label>
<input class="form-control" type="text" id="name" data-bind="value: name, valueUpdate: 'input'" />
</div>
<div class="col-12 col-lg-6">
<label class="form-label fw-bold" for="email">Email</label>
<input class="form-control" type="email" id="email" data-bind="value: email, valueUpdate: 'input'" />
</div>
<div class="col-12">
<label class="form-label fw-bold" for="Country">Country</label>
<select class="form-select"
data-bind="options: CountryList, value: Country, optionsCaption:'Choose your country ...'"></select>
</div>
<div class="col-12">
<label class="form-label fw-bold" for="PhoneNumber">PhoneNumber</label>
<input class="form-control" type="number" id="PhoneNumber"
data-bind="value: PhoneNumber, valueUpdate: 'input'" />
</div>
<div class="col-12">
<label class="form-label fw-bold" for="Address">Address</label>
<textarea class="form-control" id="Address" data-bind="value: Address, valueUpdate: 'input'"></textarea>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
<script src="validation.js" type="text/javascript"></script>
</body>
</html>Output -
Server-Side Validation
Server-side validation is performed on the server after the data is submitted. This type of validation is crucial for security purposes, ensuring that data received by the server is clean and safe to process.
When to use server-side validation:
- Security: To protect against malicious users who can bypass client-side validation, ensuring that the data conforms to the expected rules and constraints.
- Complex Validation Rules: For more complex validation logic involving database checks or server-side resources.
- Data Integrity: To enforce business rules and data integrity constraints that cannot be guaranteed solely by client-side validation.
Example: In Knockout.js, while the server-side validation is not directly handled, the process involves sending data to the server and handling the server's response:
update validation.js for server-side validation
// Initialize Knockout validation
ko.validation.init({
registerExtenders: true, // Register custom validation rules
messagesOnModified: true, // Show validation messages as soon as a field is modified
insertMessages: true, // Insert validation messages next to the input elements
parseInputAttributes: true, // Parse HTML5 input attributes for validation rules
errorClass: 'text-danger fw-semibold', // CSS class for validation error messages
messageTemplate: null // Use default message template
}, true);
// Define the ViewModel
function AppViewModel() {
var self = this;
// Define observables for form fields with validation rules
self.name = ko.observable("").extend({
required: { message: "Name is required." },
minLength: { params: 2, message: "Name must be at least 2 characters." },
maxLength: { params: 25, message: "Name must be at most 25 characters." }
});
self.email = ko.observable("").extend({
required: { message: "Email is required." },
email: { message: "Invalid email address." }
});
self.PhoneNumber = ko.observable().extend({
required: { message: "Phone Number is required." },
pattern: { params: '^[0-9]{8,}$', message: 'Phone Number does not match the pattern' }
});
self.CountryList = ko.observableArray(['Morocco', 'India', 'USA']);
self.Country = ko.observable().extend({
required: { message: "Country is required." }
});
self.Address = ko.observable().extend({
required: { message: "Address is required." }
});
// Define the submit function
self.submitForm = function () {
// Check if the form is valid
if (self.errors().length === 0) {
$.ajax({
url: '/api/students',
type: 'POST',
data: ko.toJSON(self),
contentType: 'application/json',
success: function(response) {
if (response.success) {
alert('Form submitted successfully!');
} else {
self.errors(response.errors);
}
}
});
} else {
// Show validation errors
self.errors.showAllMessages();
}
// Prevent actual form submission
return false;
};
// Initialize validation
self.errors = ko.validation.group(self);
}
// Apply bindings
ko.applyBindings(new AppViewModel());
Best Practices
- Combine Both: Use client-side validation for a better user experience and initial filtering of obvious errors, and server-side validation for security and complex checks.
- Consistent Rules: Ensure validation rules are consistent between the client-side and server-side to avoid discrepancies and potential data integrity issues.
- Graceful Degradation: Ensure that the application gracefully handles situations where JavaScript might be disabled in the browser by relying on server-side validation as a fallback.
By using both client-side and server-side validation appropriately, you can create a robust and user-friendly application.
Thanks for reading.
Also read: Retrieving and displaying data from a RESTful API in Knockout JS
Leave Comment