Good day everyone!
Please I have an HTML form and I want to validate it with HTML 5 before final validation will be done with a server-side scription language. I need a code snippet to do this. Any help?
It has been said that there are several ways to doing only one particular thing. This, in regard to HTML form validation, indicates that there are several ways to do validation one of which is with HTML 5 attributes.
It should be noted that HTML 5 attribute is only advisable for prevalidating a form before final submission to the server where a server-side scripting language, e.g. PHP, etc., will be used for final validation. This is because HTML 5 is not supported by all browsers most especially, some older versions of Internet Explorer. In this regard, HTML 5 form validation should not be totally relied on. However, it can still be used in order to save the user's time of page reload.
Below is an example:
<form action="my_page.php" method="post" runat="server" autocomplete="off" enctype="multipart/form-data">
Name:
<input type="text" name="name" placeholder="Type your full name" value="" required>.<br>
Email:
<input type="email" name="name" placeholder="Type your email" value="" required><br>
Phone Number:
<input type="number" name="phone" placeholder="Type your phone number" value="" required><br>
Select your favorite color:
<input type="color" name="favcolor"><br>
Birthday:
<input type="date" name="bday"><br>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
Birthday (date and time):
<input type="datetime-local" name="bdaytime"><br>
Birthday (month and year):
<input type="month" name="bdaymonth"><br>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><br>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30"><br>
<input type="range" name="points" min="0" max="10"><br>
Search Google:
<input type="search" name="googlesearch"><br>
Telephone:
<input type="tel" name="usrtel"><br>
Select a time:
<input type="time" name="usr_time"><br>
Add your homepage:
<input type="url" name="homepage"><br>
Select a week:
<input type="week" name="week_year"><br>
<input type="submit" value="Submit">
</form> Here is a list of some common input restrictions (some are new in HTML5):
| Attribute | Description |
|---|---|
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
Note: These attributes - runat="server" and autocomplete="off" - are used to prevent the browser from doing autocomplete of user's input when the user is typing a text similar to what he has previously typed in a text box.
