Problem Javascript

**stu567blue** · Jul 18, 2012 03:09

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:

Code:

$(document).ready(function(){
	$(".button").click(function(){
		$(".error").hide();
		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) {
			

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

HTML Code:

<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"/>
			</form>

**kennard** · Jul 18, 2012 03:38

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

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            .errMsg {
                display: none;
                color: red;
            }
        </style>
        <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 == ''){
                    errors.push('spErrName');
                }
                if(phoneNo == ''){
                    errors.push('spErrPhone'); 
                }
                if(errors.length>0){
                    for(i=0; i<errors.length; i++){
                        document.getElementById(errors[i]).style.display = 'inline';
                    }
                    return false;
                } else {
                    return true;
                }
            }
            
        </script>
    </head>
    <body>
        <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" />
        </form>
    </body>
</html>

**stu567blue** · Jul 18, 2012 04:32

Hi,

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??

User Tag List

Thread: Problem Javascript

Thread Tools

Display

Problem Javascript

Bookmarks

Bookmarks

Posting Permissions