{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Types of Form Validation"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(23, 23, 23)"}}],"text":"There are two types of form validation: server-side form validation and client-side form validation."}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Server-Side Validation"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(23, 23, 23)"}}],"text":"Server-side validation occurs when data is sent to a server from the browser for validation. A perfect scenario of server-side validation is a credit card form that accepts user input and then sends the data to a server to confirm the card is valid and has enough balance to make a particular transaction."}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Pros of Server-Side Validation"}]},{"type":"orderedList","attrs":{"tight":true,"start":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic Validation – Server-side validation is more flexible because it can access databases and conduct complex validations."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Consistent and Compatible Validation – Unlike client-side validation, server-side validation works properly across different devices, browsers, and sites."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Increased Security – Server-side validation is more secure because it prevents invalid data or malicious input from entering a database."}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Cons of Server-Side Validation"}]},{"type":"orderedList","attrs":{"tight":true,"start":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced Response Time – The Request and response processes between the browser and server reduce the response time in server-side validation."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Poor User Experience – Poor response time and users’ inability to immediately determine the valid options negatively affect user experience."}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Client-Side Validation"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(23, 23, 23)"}}],"text":"On the other hand, client-side validation involves checking data on the browser before sending it to the server. This type of validation is essential in ensuring the data a user submits conforms to all the requirements stipulated by various form controls. A good example is a registration form requiring users to enter their details and a short bio."}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Pros of Client-Side Validation "}]},{"type":"orderedList","attrs":{"tight":true,"start":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Quick Feedback – Since client-side validation happens on the user’s computer, it quickly provides feedback to the user without reloading the page."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Data Accuracy – By detecting wrong inputs and alerting the users, client-side validation ensures the data collected is accurate."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Improved User Experience – Giving users instant feedback when using a form enhances user experience."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced server load and bandwidth – Client-side validation only accepts valid data, therefore decreasing a browser’s server load and bandwidth."}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Cons of Client-Side Validation"}]},{"type":"orderedList","attrs":{"tight":true,"start":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Security Concerns – Client-side form validation is less secure since it can’t process an application from attacks in a database or server."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Easy to Dodge – Users can bypass client-side validation by disabling JavaScript or manipulating the document object model (DOM).Security Concerns – Client-side form validation is less secure since it can’t process an application from attacks in a database or server.\nEasy to Dodge – Users can bypass client-side validation by disabling JavaScript or manipulating the document object model (DOM)."}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"HTML Built-In Forms"}]},{"type":"paragraph","content":[{"type":"text","text":"Client-side form validation can be achieved using HTML or JavaScript. HTML makes use of several form controls to help you implement effective client-side validation for your users."}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Requiring an Input"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(23, 23, 23)"}}],"text":"When a specific field must be filled before submitting a form, we can use the required attribute in the input element. This attribute doesn’t need a value like other built-in form controls."}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"

\nName\n\n"}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Specifying Minimum and Maximum Values"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(23, 23, 23)"}}],"text":"Another built-in form control we can use is the minimum or maximum attributes in a number field. The attributes specify the minimum and maximum numerical values a user can select or enter in a form."}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":""}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Indicating Type"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(23, 23, 23)"}}],"text":"This form control specifies the data type a user needs to input, whether an email address, a number, a text, or any other type. We use the type attribute and set its value to number, text, email, or password. "}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":""}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Constraining Text Length"}]},{"type":"paragraph","content":[{"type":"text","text":"We can use the minlength and maxlength attributes to set the minimum and maximum characters for a text area."}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":""}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Matching Text Pattern"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(23, 23, 23)"}}],"text":"Lastly, we can create a regular expression or regex that users must match when entering data. The form can only pass when the user’s input aligns with the preset regex. In this case, we use the pattern attribute and give it a regex."}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":""}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Bottom Line"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(23, 23, 23)"}}],"text":"In this article, we exclusively discussed form validation in HTML. We also shed some light on the difference between server-side and client-side validation and outlined their respective pros and cons. Finally, we covered the most common built-in form controls used to validate forms on the client’s side. Applying server-side validation is significant for ensuring data accuracy, improving security, and improving user experience. You must also validate data on the server side."}]}]}

@Odhiamboo

Featured Article

If, Else, Else If, and Switch JavaScript Conditional Statements