Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    43
    Thanks
    18
    Thanked 1 Time in 1 Post

    Preserving existing input on error.

    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.



    Code:
    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;
    	}
    }

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    how are you calling the function from the form? are you using onsubmit='check_id()' or onsumbit='return check_id()' ?

  • Users who have thanked DanInMa for this post:

    wolfenr (10-27-2011)

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    43
    Thanks
    18
    Thanked 1 Time in 1 Post
    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

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    43
    Thanks
    18
    Thanked 1 Time in 1 Post
    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.

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    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.
    Last edited by DaveyErwin; 10-13-2011 at 12:49 PM.

  • Users who have thanked DaveyErwin for this post:

    wolfenr (10-27-2011)

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    43
    Thanks
    18
    Thanked 1 Time in 1 Post
    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

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by wolfenr View Post
    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.
    Last edited by DaveyErwin; 10-13-2011 at 12:58 PM.

  • Users who have thanked DaveyErwin for this post:

    wolfenr (10-27-2011)

  • #8
    New Coder
    Join Date
    Oct 2011
    Posts
    43
    Thanks
    18
    Thanked 1 Time in 1 Post
    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?

    Code:
    <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

  • #9
    New Coder
    Join Date
    Oct 2011
    Posts
    43
    Thanks
    18
    Thanked 1 Time in 1 Post
    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

  • #10
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    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

  • Users who have thanked DaveyErwin for this post:

    wolfenr (10-27-2011)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •