hs0ucy/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Validating a form with error handling</title>
  <style id="jsbin-css">
.frm-lbl {display:block;}

.frm-error-strg,
.frm-error-msg {
   color:red;
   display:none;
 }

/* If label have .frm-error class show error strings */
.frm-error .frm-error-strg {display:inline;}
.frm-error .frm-error-msg {display:block;}
</style>
</head>
  <body>
      <h1>Form Validation</h1>
    <form action="" id="frmExample">
      <p>
        <label class="frm-lbl" for="name">
          <span class="frm-error-strg">Error - </span>
          <b>Name </b>
          <span class="frm-error-msg"> Please indicate your name.</span>
        </label>

        <input id="name" name="name" required="required" type="text" value="">
      </p>

      <p>
        <label class="frm-lbl" for="email">
          <span class="frm-error-strg">Error - </span>
          <b>Email </b>
          <span class="frm-error-msg"> Well formed email please.</span>
        </label>

        <input id="email" name="email" required="required" type="text" value="">
      </p>

      <p>
        <label class="frm-lbl" for="age">
          <span class="frm-error-strg">Erreur - </span>
          <b>Âge</b>
          <span class="frm-error-msg"> Please indicate your age.</span>
        </label>

        <input id="age" name="age" class="yourAge lastField" required="required" type="text" value="">
      </p>

      <p>
        <button type="submit">Submit</button>
      </p>
    </form>
  <script id="jsbin-javascript">
function validForm(formID) {
    var $form = document.getElementById(formID);
    var submitCue = false;

    // Show error strings
    function indicateError(field, error) {
        if(error) {
            field.previousElementSibling.classList.add('frm-error');
            submitCue = false;
        } else {
            field.previousElementSibling.classList.remove('frm-error');
            submitCue = true;
        }
    }

    // Validate the name
    function validName() {
        var nameField = $form.querySelector('#name');

        nameField.onblur = function() {
            if(this.value.length < 2 || this.value.length > 25) {
                indicateError(this, true);
                return false;
            } else {
                indicateError(this, false);
                return true;
            }
        };
    }

    // Validate the email
    function validEmail() {
        var emailField = $form.querySelector('#email');
        var emailRegEx = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;

        emailField.onblur = function() {
            if(!emailRegEx.test(this.value)) {
                indicateError(this, true);
                return false;
            } else {
                indicateError(this, false);
                return true;
            }
        };
    }

    // Validate the age
    function validAge() {
        var ageField = $form.querySelector('#age');

        ageField.onblur = function() {
            var age = parseInt(this.value);

            if(isNaN(age) || age < 5 || age > 111) {
                indicateError(this, true);
                return false;
            } else {
                indicateError(this, false);
                return true;
            }
        };
    }

    if($form) {
        validName();
        validEmail();
        validAge();

        $form.onsubmit = function() {
            if(submitCue) {
                alert("Sent!");
                return true;
            } else {
                alert("Error!");
                return false;
            }
        };
    }
}

validForm('frmExample');
</script>


<script id="jsbin-source-css" type="text/css">.frm-lbl {display:block;}

.frm-error-strg,
.frm-error-msg {
   color:red;
   display:none;
 }

/* If label have .frm-error class show error strings */
.frm-error .frm-error-strg {display:inline;}
.frm-error .frm-error-msg {display:block;}</script>

<script id="jsbin-source-javascript" type="text/javascript">
function validForm(formID) {
    var $form = document.getElementById(formID);
    var submitCue = false;

    // Show error strings
    function indicateError(field, error) {
        if(error) {
            field.previousElementSibling.classList.add('frm-error');
            submitCue = false;
        } else {
            field.previousElementSibling.classList.remove('frm-error');
            submitCue = true;
        }
    }

    // Validate the name
    function validName() {
        var nameField = $form.querySelector('#name');

        nameField.onblur = function() {
            if(this.value.length < 2 || this.value.length > 25) {
                indicateError(this, true);
                return false;
            } else {
                indicateError(this, false);
                return true;
            }
        };
    }

    // Validate the email
    function validEmail() {
        var emailField = $form.querySelector('#email');
        var emailRegEx = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;

        emailField.onblur = function() {
            if(!emailRegEx.test(this.value)) {
                indicateError(this, true);
                return false;
            } else {
                indicateError(this, false);
                return true;
            }
        };
    }

    // Validate the age
    function validAge() {
        var ageField = $form.querySelector('#age');

        ageField.onblur = function() {
            var age = parseInt(this.value);

            if(isNaN(age) || age < 5 || age > 111) {
                indicateError(this, true);
                return false;
            } else {
                indicateError(this, false);
                return true;
            }
        };
    }

    if($form) {
        validName();
        validEmail();
        validAge();

        $form.onsubmit = function() {
            if(submitCue) {
                alert("Sent!");
                return true;
            } else {
                alert("Error!");
                return false;
            }
        };
    }
}

validForm('frmExample');</script></body>
</html>

## jsbin.fejur.css
.frm-lbl {display:block;}

.frm-error-strg,
.frm-error-msg {
   color:red;
   display:none;
 }

/* If label have .frm-error class show error strings */
.frm-error .frm-error-strg {display:inline;}
.frm-error .frm-error-msg {display:block;}

## jsbin.fejur.js
function validForm(formID) {
    var $form = document.getElementById(formID);
    var submitCue = false;

    // Show error strings
    function indicateError(field, error) {
        if(error) {
            field.previousElementSibling.classList.add('frm-error');
            submitCue = false;
        } else {
            field.previousElementSibling.classList.remove('frm-error');
            submitCue = true;
        }
    }

    // Validate the name
    function validName() {
        var nameField = $form.querySelector('#name');

        nameField.onblur = function() {
            if(this.value.length < 2 || this.value.length > 25) {
                indicateError(this, true);
                return false;
            } else {
                indicateError(this, false);
                return true;
            }
        };
    }

    // Validate the email
    function validEmail() {
        var emailField = $form.querySelector('#email');
        var emailRegEx = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;

        emailField.onblur = function() {
            if(!emailRegEx.test(this.value)) {
                indicateError(this, true);
                return false;
            } else {
                indicateError(this, false);
                return true;
            }
        };
    }

    // Validate the age
    function validAge() {
        var ageField = $form.querySelector('#age');

        ageField.onblur = function() {
            var age = parseInt(this.value);

            if(isNaN(age) || age < 5 || age > 111) {
                indicateError(this, true);
                return false;
            } else {
                indicateError(this, false);
                return true;
            }
        };
    }

    if($form) {
        validName();
        validEmail();
        validAge();

        $form.onsubmit = function() {
            if(submitCue) {
                alert("Sent!");
                return true;
            } else {
                alert("Error!");
                return false;
            }
        };
    }
}

validForm('frmExample');
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Validating a form with error handling</title>
	<style id="jsbin-css">
	.frm-lbl {display:block;}

	.frm-error-strg,
	.frm-error-msg {
	color:red;
	display:none;
	}

	/* If label have .frm-error class show error strings */
	.frm-error .frm-error-strg {display:inline;}
	.frm-error .frm-error-msg {display:block;}
	</style>
	</head>
	<body>
	<h1>Form Validation</h1>
	<form action="" id="frmExample">
	<p>
	<label class="frm-lbl" for="name">
	<span class="frm-error-strg">Error - </span>
	<b>Name </b>
	<span class="frm-error-msg"> Please indicate your name.</span>
	</label>

	<input id="name" name="name" required="required" type="text" value="">
	</p>

	<p>
	<label class="frm-lbl" for="email">
	<span class="frm-error-strg">Error - </span>
	<b>Email </b>
	<span class="frm-error-msg"> Well formed email please.</span>
	</label>

	<input id="email" name="email" required="required" type="text" value="">
	</p>

	<p>
	<label class="frm-lbl" for="age">
	<span class="frm-error-strg">Erreur - </span>
	<b>Âge</b>
	<span class="frm-error-msg"> Please indicate your age.</span>
	</label>

	<input id="age" name="age" class="yourAge lastField" required="required" type="text" value="">
	</p>

	<p>
	<button type="submit">Submit</button>
	</p>
	</form>
	<script id="jsbin-javascript">
	function validForm(formID) {
	var $form = document.getElementById(formID);
	var submitCue = false;

	// Show error strings
	function indicateError(field, error) {
	if(error) {
	field.previousElementSibling.classList.add('frm-error');
	submitCue = false;
	} else {
	field.previousElementSibling.classList.remove('frm-error');
	submitCue = true;
	}
	}

	// Validate the name
	function validName() {
	var nameField = $form.querySelector('#name');

	nameField.onblur = function() {
	if(this.value.length < 2 \|\| this.value.length > 25) {
	indicateError(this, true);
	return false;
	} else {
	indicateError(this, false);
	return true;
	}
	};
	}

	// Validate the email
	function validEmail() {
	var emailField = $form.querySelector('#email');
	var emailRegEx = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;

	emailField.onblur = function() {
	if(!emailRegEx.test(this.value)) {
	indicateError(this, true);
	return false;
	} else {
	indicateError(this, false);
	return true;
	}
	};
	}

	// Validate the age
	function validAge() {
	var ageField = $form.querySelector('#age');

	ageField.onblur = function() {
	var age = parseInt(this.value);

	if(isNaN(age) \|\| age < 5 \|\| age > 111) {
	indicateError(this, true);
	return false;
	} else {
	indicateError(this, false);
	return true;
	}
	};
	}

	if($form) {
	validName();
	validEmail();
	validAge();

	$form.onsubmit = function() {
	if(submitCue) {
	alert("Sent!");
	return true;
	} else {
	alert("Error!");
	return false;
	}
	};
	}
	}

	validForm('frmExample');
	</script>


	<script id="jsbin-source-css" type="text/css">.frm-lbl {display:block;}

	.frm-error-strg,
	.frm-error-msg {
	color:red;
	display:none;
	}

	/* If label have .frm-error class show error strings */
	.frm-error .frm-error-strg {display:inline;}
	.frm-error .frm-error-msg {display:block;}</script>

	<script id="jsbin-source-javascript" type="text/javascript">
	function validForm(formID) {
	var $form = document.getElementById(formID);
	var submitCue = false;

	// Show error strings
	function indicateError(field, error) {
	if(error) {
	field.previousElementSibling.classList.add('frm-error');
	submitCue = false;
	} else {
	field.previousElementSibling.classList.remove('frm-error');
	submitCue = true;
	}
	}

	// Validate the name
	function validName() {
	var nameField = $form.querySelector('#name');

	nameField.onblur = function() {
	if(this.value.length < 2 \|\| this.value.length > 25) {
	indicateError(this, true);
	return false;
	} else {
	indicateError(this, false);
	return true;
	}
	};
	}

	// Validate the email
	function validEmail() {
	var emailField = $form.querySelector('#email');
	var emailRegEx = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;

	emailField.onblur = function() {
	if(!emailRegEx.test(this.value)) {
	indicateError(this, true);
	return false;
	} else {
	indicateError(this, false);
	return true;
	}
	};
	}

	// Validate the age
	function validAge() {
	var ageField = $form.querySelector('#age');

	ageField.onblur = function() {
	var age = parseInt(this.value);

	if(isNaN(age) \|\| age < 5 \|\| age > 111) {
	indicateError(this, true);
	return false;
	} else {
	indicateError(this, false);
	return true;
	}
	};
	}

	if($form) {
	validName();
	validEmail();
	validAge();

	$form.onsubmit = function() {
	if(submitCue) {
	alert("Sent!");
	return true;
	} else {
	alert("Error!");
	return false;
	}
	};
	}
	}

	validForm('frmExample');</script></body>
	</html>