Previously in this section we looked at farm inputs of different types.
In addition to changing the keyboard on mobile devices we saw specifying inputs of these types is used
in farm validation.
For example here in this farm we have inputs of.
Email you are well and no
in the browser.
If we enter values into these fields that dont match their types and we try and submit the form we get
the validation error message.
In addition the fields are highlighted in red.
If I correct the value in the email field
so that its a valid email address the red highlight goes and if I try submit the farm again we get a
validation error on the next field that you are L..
If I enter a valid U R L
then we get the next error message.
If I fix this one so that its a number.
The red highlight is gone and we can submit the farm h.t. email farm validation works by showing each
validation error message in turn.
Then tell the farm is valid only when the farm is valid.
Will that browse and let you submit it.
Email inputs are validated for a rudimentary email format that it contains the at sign no spaces and
so on.
You are well inputs are validated for a valid you are l including the protocol and no inputs are validated
for a valid number for no inputs.
We can also specify the min and max attributes to specify a minimum and maximum value that the control
will accept.
If we add these to the number in part like that.
Now in the browser if we try and insert a number that's outside this range we get a validation error
message if we correct it.
The validation passes and we can submit the farm.
You might have noticed that we just submitted the farm without a valid email address.
While you are out in these fields by default these inputs are only validated if a value is supplied
an empty value is accepted as valid.
We can change this by adding the required attribute like that.
Now in the browser if we try and submit the farm we're shown a message saying we need to supply a value
for this field.
The email validation still works but this is now also a required field.
In addition to the built in validation for emails your URLs and numbers we can specify that a value
must match a specific pattern with this text input at the top.
Let's add a pattern attribute to it.
And in here we specify a pattern using a regular expression.
This website lists many common regular expression patterns for validation that you can just copy and
paste.
For example let's find the pattern for a UK postcode.
All we need to do is copy this
and paste it into the pattern attribute of our input like that.
In the browser if we put an invalid UK postcode in here and then try and submit the farm we get a message
saying please match the requested format.
We can change this message using the title attribute of the input like that.
Now if I put in an invalid value and try and submit the form then we see the custom message.
If we enter a valid UK postcode.
Then the validation passes the pattern attribute works for text search.
You have I'll tell email and password fields.
Previously you had to use javascript to validate a farm but nowadays H team L5 validation is supported
in most modern browsers.
One aspect that is difficult to change however is how the error messages are styled and the actual text
of the message.
These are hard coded into the browser and depend on which browser you are using the operating system
and its default language.
It is possible to change the text of the messages using the set custom validity function in javascript.
But if you're going to be using javascript Anyway there are better options for farm validation that
will see later on
farms in HS team L5 validated by default.
If you want to disable this for example if you want to use the various input types that change the keyboard
on a mobile device but you don't want the input in them to be validated then you can add the.
Now validate attribute to the form element.
Now in the browser the validation is disabled but on a mobile device the email you email and no inputs
will show the changes to the keyboard that we saw earlier.