SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Validation without access to form

    I'm using a shopping cart program (Shopsite) and want to validate the billing and address forms. Unfortunately I can't get access to the actual form fields as they're buttoned up in a cgi-binary.

    Does anybody know if there is an ajax field validation script(s) out there that doesn't require me to add code to the field tags? Something that I can put into the <head> and control everything from there?

    I'd like to be able to turn the fields red on error, green on success, if possible.

  2. #2
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, you can access it with DOM methods and add event handlers to it. Something like:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    window.onload = function()
    {
    	document.getElementById( 'myform' ).onsubmit = validateForm;
    }
    
    function validateForm()
    {
    	if( !document.getElementById( 'city' ).value.length )
    	{
    		alert( 'Please type in the city!' );
    		return false;
    	}
    	return true;
    }
    </script>
    </head>
    <body>
    	<form id="myform">
    
    		<input type="text" name="city" id="city">
    		<input type="submit">
    
    	</form>
    </body>
    </html>

  3. #3
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply.

    I really want to stay away from alerts, and be able to color the fields to show success or failure.

    Also, is there a way to clean the data before submitting it? Normally I would do this with PHP, but can't with Shopsite.

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, my alert() was just an example, didn't mean that you should really use it. You could just add a class to each field that doesn't validate, something like:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    window.onload = function()
    {
    	document.getElementById( 'myform' ).onsubmit = validateForm;
    }
    
    function validateForm()
    {
    	var city = document.getElementById( 'city' );
    	if( !city.value.length )
    	{
    		city.className = 'invalid';
    		return false;
    	}
    	city.value = city.value.replace( /[0-9]+/, '' );
    	return true;
    }
    </script>
    
    <style type="text/css">
    .invalid
    {
    	background-color: red;
    }
    </style>
    </head>
    <body>
    	<form id="myform">
    
    		<input type="text" name="city" id="city">
    		<input type="submit">
    
    	</form>
    </body>
    </html>
    Added some cleanup there to, so that the city field can't contain numbers.


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
  •