Internet Explorer is submitting the form when it shouldn't

Hi

I have a jquery function that looks for certain characters and if they are present, redirects to an error page.

It works great in chrome but in IE 9 (have to test on it since that's what we use at work) it will go to the error page AND submit the form as well.

Here's what I have.. Thanks for the help!!

<script type="text/javascript">
$(document).ready(function () {	
$('.notSpecilChar').blur(function () {
    if (/^[a-zA-Z0-9-.,:!@? ]*$/.test(this.value) === false) {
       window.location.replace("error.html");
    }
});
});

</script>

Open in new window

smfmetro10Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

smfmetro10Author Commented:
The interesting thing is that when you take focus away from the textarea (with class"notSpecilChar") ie - just move the cursor outside of the box and the text area has a character such as  *. Then it works great in IE.  The problem is when you go from the textarea straight to submitting the form. Then it submits the form and redirects to the error page.
0
smfmetro10Author Commented:
It appears that in IE, if you have any "good" character in the text area (a number or letter) then it will submit the form regardless of whether or not you have characters such as * # (which are not allowed)
0
hieloCommented:
The hyphen is the "range" operator in a regexp.  Put a backslash before your hyphen if you intent to match a literal hyphen:
[a-zA-Z0-9\-.,:!@? ]

OR put it at the very end:
[a-zA-Z0-9.,:!@? -]

It help to see how you are binding the event to the form.  It sounds like your submit handler is not returning false.  Try returning false at the end, but when validation passes, use the submit() method to actually submit the form.
0
smfmetro10Author Commented:
hmm... that didnt seem to help..

Here is the complete code im working on...

Thanks for the help!!

<script type="text/javascript">
$(document).ready(function () {	
$('.notSpecilChar').blur(function () {
    if (/^[a-zA-Z0-9.,:!@?- ]*$/.test(this.value) === false) {
       window.location.replace("error.html");
    }
    else {
	}
});
return false ();
});

</script>

 <form id="contactForm" name="contactForm" onsubmit="notSpecilChar()" method="post" encType="multipart/form-data" />
<textarea class="notSpecilChar"  id="txt_Message" name="txt_Message" rows="4" wrap="virtual" cols="42" maxlength="400"></textarea>
<p><br/><a class="button" style="width:100px; padding-bottom:40px;" href="javascript:submitPage()"><span>Submit</span></a><br/></p>
</form>

Open in new window

0
hieloCommented:
You should really be doing this onsubmit, not onblur.  Read the comments on the code below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {	

	// when the <a class="button"></a> is clicked
	$('a.button').on('click', function(e){
		//do not attempt to "navigate away" (which is the default behaviour of links)
		e.preventDefault();
		
		//instead, trigger the "submit" event on the <form>
		$('#contactForm').trigger('submit');
	});
	
	
	// upon form submission
	$('#contactForm').on('submit',function(e){
		// get value of textarea
		var data = $('#txt_Message').val();
		
		// check if it contains any character not listed below
		if( /[^a-zA-Z0-9.,:!@? -]/.test(data) )
		{
			alert("Error: Invalid character found")
			e.preventDefault();
			window.location.replace("error.html");
		}
		else
		{
			//OK
			return true;
		}
	});
});

</script>

<form id="contactForm" name="contactForm" method="post" encType="multipart/form-data">
	<textarea class="notSpecilChar"  id="txt_Message" name="txt_Message" rows="4" wrap="virtual" cols="42" maxlength="400"></textarea>
	<p><br/><a class="button" style="width:100px; padding-bottom:40px;" href="#" onclick="return submitPage()"><span>Submit</span></a><br/></p>
</form>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.