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.
Page 2 of 2 FirstFirst 12
Results 16 to 22 of 22
  1. #16
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,968
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Quote Originally Posted by robsworld78 View Post
    Thanks for all the input from everyone, very helpful.

    I ended up rebuilding the form that was causing problems as I wanted changes anyways, after rebuilding it worked like the others.

    Now I'm going to convert the forms back to the original method as in putting the submit buttons back inside the form tags.

    Here's what my client side validation code looks like, I'm going to put in some basic server side as well but I think in the end I'm going to try and add some code so if you don't have javascript enabled you can't use the site. It'll make my life a heck of a lot easier.

    Code:
    function validateUsername()
    {
    	var username = document.getElementById("username").value;
    	
    	if(username.length == 0)
    	{
    		producePrompt("Username is Required", "usernameprompt", "red");
    		return false;
    	}
    	if(username.length < 6)
    	{
    		producePrompt("Username is to short", "usernameprompt", "red");
    		return false;	
    	}
    	if(username.length > 20)
    	{
    		producePrompt("Username is to long", "usernameprompt", "red");
    		return false;	
    	}
    	if(!username.match(/^[A-za-z0-9\-]{6,20}$/))
    	{
    		producePrompt("Invalid Character", "usernameprompt", "red");
    		return false;	
    	}
    	
    	producePrompt("Username is Valid", "usernameprompt", "green");	
    	return true;		
    }
    
    function validatePassword()
    {
    	var password = document.getElementById("password").value;
    	
    	if(password.length == 0)
    	{
    		producePrompt("Password is Required", "passwordprompt", "red");
    		return false;
    	}
    	if(password.length < 6)
    	{
    		producePrompt("Password is to short", "passwordprompt", "red");
    		return false;	
    	}
    	if(password.length > 20)
    	{
    		producePrompt("Password is to long", "passwordprompt", "red");
    		return false;	
    	}
    	if(!password.match(/^\S{6,20}$/))
    	{
    		producePrompt("No Spaces Allowed", "passwordprompt", "red");
    		return false;	
    	}
    	
    	producePrompt("Password is Valid", "passwordprompt", "green");	
    	return true;		
    }
    
    function validateCompany()
    {
    	var company = document.getElementById("company").value;
    	
    	if(company.length == 0)
    	{
    		producePrompt("Company Name is Required", "companyprompt", "red");
    		return false;
    	}
    	if(company.length < 3)
    	{
    		producePrompt("3-45 Characters Allowed", "companyprompt", "red");
    		return false;	
    	}
    	if(company.length > 45)
    	{
    		producePrompt("3-45 Characters Allowed", "companyprompt", "red");
    		return false;	
    	}
    	if(!company.match(/^[\d,\w,\s#&@.",'\\()<>+\-|^!$/]{3,45}$/))
    	{
    		producePrompt("Invalid Character", "companyprompt", "red");
    		return false;	
    	}
    	
    	producePrompt("", "companyprompt", "green")
    	return true;
    }
    
    function validateContact()
    {
    	var contact = document.getElementById("contact").value;
    	
    	if(contact.length == 0)
    	{
    		producePrompt("Contact Name is Required", "contactprompt", "red");
    		return false;
    	}
    	if(contact.length < 3)
    	{
    		producePrompt("3-45 Characters Allowed", "contactprompt", "red");
    		return false;	
    	}
    	if(contact.length > 45)
    	{
    		producePrompt("3-45 Characters Allowed", "contactprompt", "red");
    		return false;	
    	}
    	if(!contact.match(/^[A-Za-z]*\s{1}[A-Za-z]{1}[A-Za-z]*$/))
    	{
    		producePrompt("First and Last Name Required", "contactprompt", "red");
    		return false;	
    	}
    	
    	producePrompt("", "contactprompt", "green");	
    	return true;
    }
    
    function validateFromSuite()
    {
    	var fromsuite = document.getElementById("fromsuite").value;
    	
    	if(fromsuite.length == 0)
    	{
    		producePrompt("", "fromsuiteprompt", "red");
    		return true;
    	}
    	if(fromsuite.length < 1)
    	{
    		producePrompt("1-10 Characters Allowed", "fromsuiteprompt", "red");
    		return false;	
    	}
    	if(fromsuite.length > 10)
    	{
    		producePrompt("1-10 Characters Allowed", "fromsuiteprompt", "red");
    		return false;	
    	}
    	if(!fromsuite.match(/^[\d,\w,\s&+\-/]{1,10}$/))
    	{
    		producePrompt("Invalid Character", "fromsuiteprompt", "red");
    		return false;	
    	}
    	
    	producePrompt("", "fromsuiteprompt", "green");	
    	return true;
    }
    
    function validateFromAddress()
    {
    	var fromaddress = document.getElementById("fromaddress").value;
    	
    	if(fromaddress.length == 0)
    	{
    		producePrompt("Address is Required", "fromaddressprompt", "red");
    		return false;
    	}
    	if(fromaddress.length < 3)
    	{
    		producePrompt("3-45 Characters Allowed", "fromaddressprompt", "red");
    		return false;	
    	}
    	if(fromaddress.length > 45)
    	{
    		producePrompt("3-45 Characters Allowed", "fromaddressprompt", "red");
    		return false;	
    	}
    	if(!fromaddress.match(/^[\d,\w,\s#&@.",'\\()<>+\-|^!$/]{3,45}$/))
    	{
    		producePrompt("Invalid Character", "fromaddressprompt", "red");
    		return false;	
    	}
    	
    	producePrompt("", "fromaddressprompt", "green");	
    	return true;
    }
    
    function validateFromPostalCode()
    {
    	var frompostalcode = document.getElementById("frompostalcode").value;
    	
    	if(frompostalcode.length == 0)
    	{
    		producePrompt("Postal Code is Required", "frompostalcodeprompt", "red");
    		return false;
    	}
    	
    	producePrompt("", "frompostalcodeprompt", "green");	
    	return true;
    }
    
    function validatePhoneNumber()
    {
    	var phonenumber = document.getElementById("phonenumber").value;
    	
    	if(phonenumber.length == 0)
    	{
    		producePrompt("Phone Number is Required", "phonenumberprompt", "red");
    		return false;
    	}
    	
    	producePrompt("", "phonenumberprompt", "green");	
    	return true;
    }
    
    function validateEmail()
    {
    	var email = document.getElementById("email").value;
    	
    	if(email.length == 0)
    	{
    		producePrompt("Email Address is Required", "emailprompt", "red");
    		return false;
    	}
    	if(email.length < 5)
    	{
    		producePrompt("5-45 Characters Allowed", "emailprompt", "red");
    		return false;	
    	}
    	if(email.length > 45)
    	{
    		producePrompt("5-45 Characters Allowed", "emailprompt", "red");
    		return false;	
    	}
    	if(!email.match(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/))
    	{
    		producePrompt("Invalid Email Address", "emailprompt", "red");
    		return false;	
    	}
    	
    	producePrompt("", "emailprompt", "green");	
    	return true;
    }
    
    function validateWebsite()
    {
    	var website = document.getElementById("website").value;
    	
    	if(website.length == 0)
    	{
    		producePrompt("", "websiteprompt", "red");
    		return true;
    	}
    	if(website.length < 5)
    	{
    		producePrompt("5-45 Characters Allowed", "websiteprompt", "red");
    		return false;	
    	}
    	if(website.length > 45)
    	{
    		producePrompt("5-45 Characters Allowed", "websiteprompt", "red");
    		return false;	
    	}
    	if(website.match(/^[\w\d]*[.]{1}[\w]{2,6}$/))
    	{
    		producePrompt("Please include \"www.\"", "websiteprompt", "red");
    		return false;	
    	}
    	if(!website.match(/^[w]{3}[.]{1}[\w\d]*[.]{1}[\w]{2,6}$/))
    	{
    		producePrompt("Invalid Website Address", "websiteprompt", "red");
    		return false;	
    	}
    	
    	producePrompt("", "websiteprompt", "green")
    	return true;
    }
    
    
    
    
    
    
    function validateRegisterForm()
    {
    	if (!validateUsername() || !validatePassword() || !validateCompany() || !validateContact() || !validateFromSuite() || !validateFromAddress() || !validateFromPostalCode() || !validatePhoneNumber() || !validateEmail() || !validateWebsite())
    	{
    	   // do nothing
    	}
    	else
    	{
    		document.getElementById("accountregisterform").submit();
    	}
    }
    
    function validateCompanyInfoForm()
    {
    	if (!validateCompany() || !validateContact() || !validatePhoneNumber() || !validateWebsite() || !validateEmail())
    	{
    		if(validateCompany() == false)
    			{
    				alert("Please add a valid company name!");
    			}
    	   
    		if(validateContact() == false)
    			{
    				alert("Please add a valid contact name!");
    			}
    			
    		if(validatePhoneNumber() == false)
    			{
    				alert("Please add a valid phone number!");
    			}
    						
    		if(validateEmail() == false)
    			{
    				alert("Please add an valid email address!");
    			}			
    	}
    	else	
    	{
    	//	document.getElementById("companyinformationform").submit();	
    	SubmitCompanyInfoUpdate()
    	}	
    }
    
    function producePrompt(message, promptLocation, color)
    {
    	document.getElementById(promptLocation).innerHTML = message;
    	document.getElementById(promptLocation).style.color = color;	
    }
    The last function works with all the other functions and the 2nd and 3rd last functions are for validating before submitting.

    I'm able to reuse any of the functions for any form if they have that same field I just have to create a function for the submit button of each form.

    I don't have the website hosted yet, its just on my local machine so I can't post a link.

    Is this a good form of validation? Is this a good practice to follow for other sites?
    You can't reuse those functions as you are using referencing the elements by id. The ids should be unique on a page. That's why I suggested in my previous post to reference the fields as formObject.fieldName. You can have multiple field names but not ids.

  2. #17
    New Coder
    Join Date
    Aug 2013
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I've just been using the same ID's on all the forms, seems to work ok. The forms using the same ID's are on different pages, that's probably why it works.

    For instance any form that has the field username I give it the id of username.

  3. #18
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    In general, there is no reason to give IDs to <form> fields and many reasons *NOT* to do so. The exception is when you want to us a <label> with a form field, in which case the ID on the form field is required.

    The proper procedure is to give the <form> itself an ID (named <form>s are obsolete) and then reference the fields in that form via the form.

    Example:
    Code:
    <form id="companyInformationForm">
        <input name="company"/>
        <input name="manager/>
        ... etc. ...
    </form>
    
    <script type="text/javascript">
    var frm = document.getElementById("companyInformationForm");
    
    function checkName( fld, txt )
    {
        if ( fld.value.replace(/\s/g,"").length < 5 )
        {
            alert( "Please enter a valid value for " + txt );
            return false;
        }
        return true;
    }
    
    frm.onsubmit = function( )
    {
        return checkName( frm.company ) && checkName( frm.manager );
    }
    </script>
    Just incidentally, this is marginally more efficient than using document.getElementById() for each field (not to mention being less overall typing).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  4. #19
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,968
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Quote Originally Posted by Old Pedant View Post
    The exception is when you want to us a <label> with a form field, in which case the ID on the form field is required.
    That's not even required. Just wrap the form field inside the label.

    Code:
    <label><input type="checkbox" name="chk" />Check me</label>

  5. #20
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Quote Originally Posted by glenngv View Post
    That's not even required. Just wrap the form field inside the label.

    Code:
    <label><input type="checkbox" name="chk" />Check me</label>
    That's what I did for a long time, until Felgall pointed out to me that this doesn't work well with screen readers (for vision impaired). The <label for="xxx"> version gives the screen reader more info to work with.

    I am still sloppy on occasion, but I'm trying to reform my ways.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  6. #21
    New Coder
    Join Date
    Aug 2013
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I uploaded my site online to try things out and I can't even login now. When I try it only reloads the top of the page.

    I changed all references of the database to the new host. I'm using 000webhost for testing purposes as its free.

    http://a2b.net78.net/login.php

    username: chase
    password: chase

  7. #22
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    And why do you think this has anything to do with JavaScript???

    I would say you have PHP problems. It's typical for a PHP error to just cause a page to die *BANG* without message. Time to do some debugging.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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