PDA

View Full Version : simple javascript validation for a signup form?



c_martini
25 Mar 2010, 10:24 AM
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:


<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! :confused:

c_martini
25 Mar 2010, 03:07 PM
A nice person in another forum helped me out. Between us we came up with a solution for those who wish to know:


<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

:)