SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict stu567blue's Avatar
    Join Date
    Aug 2007
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    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>

  2. #2
    Non-Member
    Join Date
    Jun 2012
    Posts
    88
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    SitePoint Addict stu567blue's Avatar
    Join Date
    Aug 2007
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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??


Bookmarks

Posting Permissions

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