Jiyl Jiyl - 3 months ago 9
HTML Question

How do I get my form to use new information after errors are corrected?

I'm search but i'm not 100% how you get this to resubmit, using new information, I've got all the errors up and showing as appropriate, but in terms of, how to hit the submit button again, and then it reassesses the form; how do i go about this? Any help would be appreciated.

html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RATool</title>
<link rel="stylesheet" type="text/css" href="cfcss.css">
<script src="cf.js"></script>
</head>
<body>
<h1> Health Authority </h1>
<h2> Contact Form </h2>
<form>
<fieldset>
<label for="fname">First Name:</label>
<input name="fname" id="fname" class="formfield" type="text">
<span id="errfname" class="error">*This is required</span>
<span id="errfname1" class="error">*Name fields must have more than one character, and do not contain numbers
or other non-allowed alphabetic characters. The only character the last name
field should legitimately contain is a hyphen (e.g. Whittaker-Jones).</span>
<span id="errfname2" class="error">*This can only contain alphabetic numbers and if desired, one hyphen</span>
<br>
<label for="sname">Surname:</label>
<input name="sname" id="sname" class="formfield" type="text">
<span id="errsname" class="error">*This is required</span>
<span id="errsname1" class="error">*Name fields must have more than one character, and do not contain numbers
or other non-allowed alphabetic characters. The only character the last name
field should legitimately contain is a hyphen (e.g. Whittaker-Jones).</span>
<span id="errsname2" class="error">*This can only contain alphabetic numbers and if desired, one hyphen</span>
<br>
<label for="title">Title: </label>
<select name="title" id="title">
<option value="Please select">Please select</option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss.">Miss.</option>
<option value="Master.">Master.</option>
</select>
<span id="errtitle" class="error">*This is required</span>
<br>
<br>
<br>
<label for="HANo">Health Authority Number:</label>
<input name="HANo" id="HANo" class="formfield"type="text">
<span id="errHANo" class="error">*This is required</span>
<span id="errHANo2" class="error">*This must be in format ZHA123456 (ZHA followed by 6 numbers)</span>
<br>
<br>
<label for="email">Email:</label>
<input name="email" id="email" class="formfield"type="text">
<span id="erremail" class="error">*This is required</span>
<span id="erremail2" class="error">*Please enter a valid email</span>
<br>
<br>
<br>
<label for="telno">Telephone Number:</label>
<input name="telno" id="telno" class="formfield" type="text">
<span id="errtelno" class="error">* If a telephone number is entered, then it should contain only numbers, not
letters, or other disallowed characters. A valid Zedland telephone number has
11 digits (no spaces)</span>
<span id="errtelno1" class="error">*This must just be numbers</span>
<br>
<button onclick="checkForm()">Submit</button>
</fieldset>
</form>
</body>
</html>


javascript

function checkForm(){

var errors=document.getElementsByClassName('error');
for(var i=0;i<errors.length;i++){
errors[i].style.display='none';
}

if (document.getElementById("fname").value == "" ) {
document.getElementById("errfname").style.display = "inline";
document.getElementById("errfname").style.visibility = "visible";
e.preventDefault();
}

if (document.getElementById("fname").value.length < 2 ) {
document.getElementById("errfname1").style.display = "inline";
document.getElementById("errfname1").style.visibility = "visible";
e.preventDefault();
}

if (document.getElementById("fname").value.length > 1) {
checkFName();
e.preventDefault();
}

if (document.getElementById("sname").value == "" ) {
document.getElementById("errsname").style.display = "inline";
document.getElementById("errsname").style.visibility = "visible";
e.preventDefault();
}

if (document.getElementById("sname").value.length < 2 ) {
document.getElementById("errsname1").style.display = "inline";
document.getElementById("errsname1").style.visibility = "visible";
e.preventDefault();
}

if (document.getElementById("sname").value.length > 1) {
checkSName();
e.preventDefault();
}

if (document.getElementById("title").value == "Please select" ) {
document.getElementById("errtitle").style.display = "inline";
document.getElementById("errtitle").style.visibility = "visible";
e.preventDefault();
}

if (document.getElementById("HANo").value == "" ) {
document.getElementById("errHANo").style.display = "inline";
document.getElementById("errHANo").style.visibility = "visible";
e.preventDefault();
}

if (document.getElementById("HANo").value.length > 0) {
if (checkHANo());
e.preventDefault();
}

if (document.getElementById("email").value == "" ) {
document.getElementById("erremail").style.display = "inline";
document.getElementById("erremail").style.visibility = "visible";
e.preventDefault();
}

if (document.getElementById("email").value.length > 0 ) {
if(checkEmail());
e.preventDefault();
}

if (document.getElementById("telno").value.length != 11 ) {
document.getElementById("errtelno").style.display = "inline";
document.getElementById("errtelno").style.visibility = "visible";
e.preventDefault();
}

if (document.getElementById("telno").value == /^\d+$/ ) {
document.getElementById("errtelno1").style.display = "inline";
document.getElementById("errtelno1").style.visibility = "visible";
e.preventDefault();

}
}

function checkEmail(){
var email = document.getElementById('email');
var emailRegEx = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/;

if (!emailRegEx.test(email.value)) {
document.getElementById("erremail2").style.display="inline";
document.getElementById("erremail2").style.visibility = "visible";
return true;
}
e.preventDefault();
}

function checkHANo(){
var HANo = document.getElementById("HANo");
var hanoRegEx = /[ZHA]\d{6}/;

if (!hanoRegEx.test(HANo.value)) {
document.getElementById("errHANo2").style.display = "inline";
document.getElementById("errHANo2").style.visibility = "visible";
return true;
}
e.preventDefault();
}

function checkFName(){
var first = document.getElementById("fname");
var firstRegEx = /^[a-zA-Z-]{2,40}$/;

if (!firstRegEx.test(first.value)){
document.getElementById("errfname2").style.display = "inline";
document.getElementById("errfname2").style.visibility = "visible";
return true;
}
e.preventDefault();
}

function checkSName(){
var sec = document.getElementById("sname");
var secRegEx = /^[a-zA-Z-]{2,40}$/;

if (!secRegEx.test(sec.value)){
document.getElementById("errsname2").style.display = "inline";
document.getElementById("errsname2").style.visibility = "visible";
return true;
}
e.preventDefault();
}

Answer

Your error messages are displaying by default. To hide those add the CSS class below:

.error{ display:none; }

Add this piece of code at the beginning of checkForm() to re-hide the message when error is corrected. Eg:

var errors=document.getElementsByClassName('error');
for(var i=0;i<errors.length;i++){
    errors[i].style.display='none';
}

Instead of calling the formCheck() function on onclick of the button, call it onsubmit of the form with a return. Like

<form method="post" action="yourpage" onsubmit="return checkForm()"> 

To show all errors, declare a variable with default value as true like var isValid=true; just above/below the for loop Eg:

function checkForm(){    
var isValid = true;
var errors=document.getElementsByClassName('error');
for(var i=0;i<errors.length;i++){
    errors[i].style.display='none';
}   

if (document.getElementById("fname").value == "" ) {
    document.getElementById("errfname").style.display = "inline";
    document.getElementById("errfname").style.visibility = "visible";
    isValid = false;
}

if (document.getElementById("fname").value.length < 2 ) {
    document.getElementById("errfname1").style.display = "inline";
    document.getElementById("errfname1").style.visibility = "visible";
    isValid = false;
}

if (document.getElementById("fname").value.length > 1) {
    isValid = checkFName();
}

if (document.getElementById("sname").value == "" ) {
    document.getElementById("errsname").style.display = "inline";
    document.getElementById("errsname").style.visibility = "visible";
    isValid = false;
}

if (document.getElementById("sname").value.length < 2 ) {
    document.getElementById("errsname1").style.display = "inline";
    document.getElementById("errsname1").style.visibility = "visible";
    isValid = false;
}

if (document.getElementById("sname").value.length > 1) {
    isValid = checkSName();
}

if (document.getElementById("title").value == "Please select" ) {
    document.getElementById("errtitle").style.display = "inline";
    document.getElementById("errtitle").style.visibility = "visible";
    isValid = false;
}

if (document.getElementById("HANo").value == "" ) {
    document.getElementById("errHANo").style.display = "inline";
    document.getElementById("errHANo").style.visibility = "visible";
    isValid = false;
}

if (document.getElementById("HANo").value.length > 0) {
    isValid = checkHANo();
}

if (document.getElementById("email").value == "" ) {
    document.getElementById("erremail").style.display = "inline";
    document.getElementById("erremail").style.visibility = "visible";
    isValid = false;
}

if (document.getElementById("email").value.length > 0 ) { 
    if(checkEmail());
    isValid = false;
}

if (document.getElementById("telno").value.length != 11 ) { 
    document.getElementById("errtelno").style.display = "inline";
    document.getElementById("errtelno").style.visibility = "visible";
    isValid = false;
}

if (document.getElementById("telno").value == /^\d+$/ ) {
    document.getElementById("errtelno1").style.display = "inline";
    document.getElementById("errtelno1").style.visibility = "visible";
    isValid = false;

}
return isValid;
}

NOTE: You have to return false from other functions such as checkEmail(),checkHANo() also if there is error. It seems you are returning only true. And remove all e.preventDefault()

That's it

Comments