Preserving existing input on error.

[wolfenr]

Hi all and hope you can help.

I have a form validication function that checks a variety of form inputs which appears to be working fine. Trouble is that if I deliberately throw it some non-valid entries it clears the form with the data I've already supplied.

Can anyone suggest a method for preserving the input the user has already made so that this doesn't need to be re-input when the user has input invalid data?

My thanks
Rog

Here's my validation code. which checks..

• Whether a user has input their full name - entering full name is optional and if not true will negate subsequent checks, i.e. doesn't bother checking any other inputs.
• Whether a user has supplied both first and last names, fail message pops up if not.
• Whether a user has suppllied a full name but not an email or telephone number, fail message pops up if not.
• Whether a user has supplied a valid email address, fail message pops up if not.
• Whether a user has supplied a valid telephone number, fail message pops up if not.
• If we've passed all these tests, O.K. - submit.

function check_id(){
	var status = false;
	var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
	var telRegEx = /^\s*\(?(020[7,8]{1}\)?[ ]?[1-9]{1}[0-9{2}[ ]?[0-9]{4})|(0[1-8]{1}[0-9]{3}\)?[ ]?[1-9]{1}[0-9]{2}[ ]?[0-9]{3})\s*$/;

	// 1st test, are the name fields blank, this is valid if the user doesn't want to enter the draw?
	if (document.feedback.first.value =="" && document.feedback.second.value =="") {
		status=false; 
		confirm("You will not be entered in our free prize draw unless you supply your full name and email address or telephone number. Is that O.K?");
		return status;
	}

	// 2nd test, has the user supplied both a first name and surname?
	 else if (document.feedback.first.value =="" || document.feedback.second.value =="") {
		status=false;
		alert("You need to supply your full name to enter the draw.");
	}

	// 3rd test, has the user supplied a full name but not supplied an email address or tel number, this isn't valid.
	 else if (document.feedback.email.value =="" && document.feedback.tel.value ==""){
		status=false;
		alert("You need to supply either a valid email address or telephone number to enter the draw.");
	}

	// 4th test, user has supplied an email address and / or an email address and tel, check each.
	else if(document.feedback.email.value !=""){

	// 4th test part 1, user has supplied an email address, check it is valid.
		if (document.feedback.email.value.search(emailRegEx) == -1) {
          alert("Please enter a valid email address.");
		  status=false;
		}
	else {
		alert("Thank you. You will be entered into our free prize draw. Good luck!");
		status = true;
		}
	 return status;
	}

	// 4th test part 2, has the user supplied a tel number, this is a valid option, check it.
	else if (document.feedback.tel.value !="" ) {
		if (document.feedback.tel.value.search(telRegEx) == -1) {
        alert("Please enter a valid telephone number.");
		status=false;
	    }
	else {
		alert("Thank you. You will be entered into our free prize draw. Good luck!");
		status = true;
		}
	 return status;
	}
}

[DanInMa]

how are you calling the function from the form? are you using onsubmit='check_id()' or onsumbit='return check_id()' ?

[wolfenr]

Thanks DanInMa,

It's called with onsubmit="check_id()".

You've got me thinking now, wondering what the difference is between straight onsubmit is and onsubmit="return check_id()".

Thanks for your interest.
R

[wolfenr]

OK DanInMa,

I've checked out the onsubmit function using the 'return' element here and invalid entries don't get lost when the form is submitted.

Just to put this in context, my webpage is being put together as part of some course work to demonstrate all sorts of 'on' functions; onsubmit, onReset, onMouseOver, etc. etc. So (sadly) the page has an abundance of these which may be interfering with retaining invalid data onsubmit.

You can see the page in action here.

Thanks
R.

[DaveyErwin]

you have on your page ....
onSubmit="check_id(); "
should be ......
onSubmit="return check_id(); "


Your fields are reset because
the form IS submitted, if submit
is suppressed with a return
false the fields retain their
values.

[wolfenr]

Hi Davey,

Tried that but sadly it didn't work. It seemed to ignore my form validation and also lose the data already entered.

Thanks anyway, appreciated.
R

[DaveyErwin]

Originally Posted by wolfenr

Hi Davey,

Tried that but sadly it didn't work. It seemed to ignore my form validation and also lose the data already entered.

Thanks anyway, appreciated.
R

I just tried your page and I
got an alert that said the
email was invalid and field
data was preserved.
When the form is actually
submitted the fields are cleared
they preserve theit data
when submission is suppressed.
This is the way it should be.

[wolfenr]

Thanks again Davey, appreciate your input.

It doesn't work for me, do you think this might be a browser issue, I've tried in IE, FF and Chrome.

I've got pesky welcome and goodbye messages (currently disabled) on the page using the onLoad and onUnLoad functions, for me when these trigger, they remove previous input.

Something strange going on, have I got the onClick function as it should be?

<form action="" method="get" name="feedback" enctype="application/x-www-form-urlencoded" onSubmit="return; check_id(); " onReset="confirm('This will clear all your entries, is that O.K?'); clear();">

My thanks
R

[wolfenr]

Davey thanks a lot, you've got me going in the right direction.

When I examined my Javascript, I had missed out some 'return' statuses when the validation failed. I've now corrected that and it appears to work OK.

Don't know why the email validator provided a fail message when you entered a correct one.

Appreciate your help,
R

[DaveyErwin]

onSubmit="return; check_id();
is wrong
but on your page
onSubmit="return check_id(); "
is OK.
Try typing in an invalid
email and see what happens