HTML5 form validation

HTML & CSS
1

Hi there codeispoetry,

at the risk of being branded a party pooper, I have to
ask why you are putting all your efforts into client side
javascript form validation when HTML can now do this
work adequately for you, with the required attribute :winky:

coothead

3 Likes
2

Hi there @coothead,
How? Please guide me with HTML version?

You are never a Party Pooper. Your English is awesome.

3

Strange for being said in the JavaScript forum, but it’s typically better when the same thing is achieved with less JavaScript.

Some good details about the required attribute and other HTML5 form validation techniques are found at https://www.the-art-of-web.com/html/html5-form-validation/

4 Likes
4

Hi there codeispoetry,

here is an example, which I knocked up quickly…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
form {
    display: inline-block;
    padding: 2em;
    border: 1px solid #999;
    border-radius: 0.5em;
    background-color: #fff;
 }
fieldset {
    padding: 1em;
    margin-bottom: 1em;
    border: 1px dotted #ccc;
    border-radius: 0.5em;
}
label {
    display: inline-block;
    width: 5em;
    margin-bottom: 1em;
 }
</style>

</head>
<body> 
 <form action="#">
  <fieldset>
   <label for="fn">first name:</label>
   <input id="fn" type="text" name="firstname" required><br>
   <label for="sn">surname:</label>
   <input id="sn" type="text" name="surname" required><br>
   <label for="em">email: </label>
   <input id="em" type="email" name="em" required>
  </fieldset>
   <input type="submit">
 </form>

</body>
</html>

-coothead

2 Likes
5

I believe HTML5 validation will be customizable also may be if wewant to use an image/Emoji→

image
image756×138 2.53 KB

7

HTML5 form validation supports CSS for styling and presentation.

Needless though it is to say, our CSS forum has skilled people that know how to make the most from that.

8

Off Topic:

For the future reader this post is a continuation of this post.

9

Hi there codeispoetry,

here is a minor customised example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
form {
    display: inline-block;
    padding: 2em;
    border: 1px solid #999;
    border-radius: 0.5em;
    background-color: #fff;
 }
fieldset {
    padding: 1em;
    margin-bottom: 1em;
    border: 1px dotted #ccc;
    border-radius: 0.5em;
}

label {
    display: inline-block;
    width: 5em;
    margin-bottom: 1em;
 }

span {
    display: inline-block;
    width:1em;
    padding-left:0.5em;
 }

#fn:invalid + span::before,
#sn:invalid + span::before,
#em:invalid + span::before {
    content: '\02297';
    color: #f00;
}

#fn:valid + span::before,
#sn:valid + span::before,
#em:valid + span::before {
    content: '\02713';
    color: #0f0;
}

</style>

</head>
<body> 
 <form action="#">
  <fieldset>
   <label for="fn">first name:</label>
   <input id="fn" type="text" name="firstname" minlength="2" placeholder="at least two letters" required><span></span><br>
   <label for="sn">surname:</label>
   <input id="sn" type="text" name="surname" minlength="2" placeholder="at least two letters" required><span></span><br>
   <label for="em">email: </label>
   <input id="em" type="email" name="em" placeholder="valid address needed" required><span></span>
  </fieldset>
   <input type="submit">
   <input type="reset">
 </form>

</body>
</html>

coothead

10

How quaint. I’ve not seen one of those in a while! :biggrin:

2 Likes
11

Call me old fashioned or even just old. :wonky:

I just popped it in as something to play with: :rofl:

coothead

2 Likes
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.