HTML5 form validation

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

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

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

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

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

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

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.

Off Topic:

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

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

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

2 Likes

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

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

coothead

2 Likes