Problem Javascript

Hi All,

I am trying to amend this script, the form itself is written in HTML and what I need it to do is rather than it submit the form, I need it to simply show the errors shown in the SPANs… when I click the button it give me the error, however when I click it again it then submits the form… any ideas how to get round this, my code is shown below:

		var hasError = false;
		var emailReg = /^([\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4})?$/;

		var formName = $("#name").val();
		var formEmail = $("#email").val();
		var formPhone = $("#telephone").val();

		if(formName == '') {
			$("#name").replaceWith('<span class="error"><input name="name" id="name" type="text" value="Contact name required"/></span>');
			hasError = true;
		if(formEmail == '') {
			$("#email").replaceWith('<span class="error"><input name="email" id="email" type="email" value="E-mail missing"/></span>');
			hasError = true;
		if(formPhone == '') {
			$("#telephone").replaceWith('<span class="error"><input name="telephone" id="telephone" type="tel" value="Telephone required"/></span>')
			hasError = true;

		if( !emailReg.test( formEmail ) ) {
			$("#email").replaceWith('<span class="error"><input name="email" id="email" type="email" value="Invalid Email entered"/></span>');
			hasError = true;

		if(hasError == false) {

   				{   contactname: formName,
   				    email: formEmail,
   				    telephone: formPhone,
					referer: window.location.hostname
						$("#signup").animate({height: "50px"}, 600);
						$("#signup").html("<p class='thanks'>Thanks! Your order has been sent, we will be in touch soon.</p>");
		return false;

<form name="form" method="post" action="" onsubmit="return false;">
				<input name="name" id="name" type="text" />
				<input name="email" id="email" type="email" value="What's your email address?" onfocus="value=''"/>
				<input name="telephone" id="telephone" type="tel" />
				<a href="" name="submit" class="button">Sign Up</a>
				<input type="hidden" name="type" id="type" value="launch"/>

You might find this approach easier. You’ll need better validation than just checking for empty values though.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            .errMsg {
                display: none;
                color: red;
        <script type="text/javascript">
            function validateForm(){
                var fName = document.getElementById('txtName').value;
                var phoneNo = document.getElementById('txtPhone').value;
                var errors = [];
                var spansO = document.getElementsByClassName('errMsg');
                for(var i=0; i<spansO.length; i++){
                    spansO[i].style.display = 'none';
                if(fName == ''){
                if(phoneNo == ''){
                    for(i=0; i<errors.length; i++){
                        document.getElementById(errors[i]).style.display = 'inline';
                    return false;
                } else {
                    return true;
        <form method="post" action="url1" onsubmit="return validateForm();">  
            Name: <input name="name" id="txtName" type="text" /><span class="errMsg" id="spErrName">Name is invalid</span><br />
            Phone: <input name="telephone" id="txtPhone" /><span class="errMsg" id="spErrPhone">Phone No is invalid</span><br />
            <input type="submit" value="Submit" />


Thanks for your solution - I’d like to use the code that I’ve pasted.

Is it possible to use replace without causing problems that I am having such as the script continuing to process??