Results 1 to 2 of 2

Thread: simple javascript validation for a signup form?

  1. #1
    Join Date
    Sep 2006
    Location
    London, UK
    Posts
    4

    simple javascript validation for a signup form?

    I have built a signup form which has several text inputs and text areas. Their labels are set as their values. When the user focuses on the field, the label text is cleared to accept text input. When focus is changed to another field. The field checks if text has been entered. If it has not, it then resets the value back to the default label value.

    For example:

    Code:
    <input type="text" name="company_name" size="50" class="textInput" value="Company Name" onfocus="if(this.value=='Company Name')this.value='';" onblur="if(this.value=='')this.value='Company Name';" />
    What I would like to do is have some simple javascript which checks the fields on submit. If any of the required fields still have the default label value, then I would like to change the colour of the label value in the input to red and disable the form submit until the value is corrected. Most of the inputs and text areas will accept any text, though one is an email text input. I don't think any fancy validation is needed for this email input , other than checking to be sure a '@' has been entered.

    Since the website that this form will be contained in runs jQuery, I have looked into some plugins for form validation. However, these seem to be over-complicated for what I need. I want to keep this as simple and light as possible. Oh, and also, I am not allowed to use anything php based as this is not allowed to run on our servers for security reasons...

    Any advice or suggestions are much appreciated!

  2. #2
    Join Date
    Sep 2006
    Location
    London, UK
    Posts
    4

    [SOLVED] simple javascript validation for a signup form?

    A nice person in another forum helped me out. Between us we came up with a solution for those who wish to know:

    Code:
    <script language="JavaScript">
    	function validateIt() {
    	if (document.form.company_name.value == "Company Name") {
    	document.form.company_name.value = 'Company Name';
    	document.form.company_name.style.color = 'red';
    	document.form.company_name.style.borderColor = 'red';
    	return false;
    	}
    </script>
    <form action="#" method="post" name="form" class="affiliateForm" onsubmit="return validateIt()">
    <input type="text" name="company_name" size="50" class="textInput" value="Company Name" onfocus="if(this.value=='Company Name')this.value='';" onblur="if(this.value=='')this.value='Company Name';" />
    <input type="submit" name="submit" value="Submit" class="submit" />
    This works exactly as I need it to. A stripped down code only version of the form is here:

    http://www.ticketswitch.com/new/form.html


Similar Threads

  1. Javascript beginner - creating hidden form values from variables
    By javascript_beg in forum Web Design, HTML Reference and CSS
    Replies: 0
    Last Post: 29 Jul 2009, 07:25 AM

Posting Permissions

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