Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member c_martini's Avatar
    Join Date
    Sep 2006
    Location
    London, UK
    Posts
    8
    Member #
    13912
    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.

    Any advice or suggestions are much appreciated!

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Try this: http://www.uroomsurf.com/scripts/jqu...tools-1.0.1.js

    (Requires jQuery).

    Then all you have to do is add classes to your input to validate. For example:

    <input id="emailInput" type="text" name="email" class="qf-format-email qf-required qf-minlength-8" />
    <input id="emailConfirm" type="text" name="confirm" class="qf-confirm-emailInput" />

    You can also add watermarks to your inputs as follows:

    <label for="emailInput" class="qf-watermark" style="display:none">Enter your email</label>
    <label for="emailConfirm" class="qf-watermark" style="display:none">Confirm your email</label>

    Last thing you have to do is add an event trigger to your form:

    <form action="" onsubmit="return validate(this)">

    Try it out!

  4. #3
    Junior Member c_martini's Avatar
    Join Date
    Sep 2006
    Location
    London, UK
    Posts
    8
    Member #
    13912
    Thanks for the suggestion smosely. I have looked at the script. However, I forgot to mention that I cannot use php. We are not allowed to run php on our server for security reasons. I would need a non php based solution...

  5. #4
    Junior Member c_martini's Avatar
    Join Date
    Sep 2006
    Location
    London, UK
    Posts
    8
    Member #
    13912
    Someone in another forum has also helped. 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



Remove Ads

Posting Permissions

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

Search tags for this page

free javascript sign up page
,
javascript sign up
,
javascript signup
,
javascript to sign up
,
register or sign up form javascript
,

register or sign up form validation in javascript

,

sign up page javascript code

,
sign up page js code
,
simple free javascript email sign up code
,
simple javascript program for sign in and sign up
Click on a term to search for related topics.
All times are GMT -6. The time now is 11:17 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com