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.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2008
    Location
    Aus
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Javascript for required field and a simple password to discourage spam from bots

    I am trying unsuccessfully to use javascript to prevent form submitting unless surname, first name and email are filled.
    ALSO client complained of receiving up to 30 forms which are spam filled in by bots.
    SO have tried a simple password/access code - which Has to be filled correctly to submit form - but can't get this working either?
    Hopeyou can help me Rob

    See sample page with form:-
    Sports Holiday Clinics - Bookings- Sydney Australia
    Javascript:-
    Code:
    <script type="text/javascript" language="Javascript">
    <!-- Begin
    function verify() {
    var themessage = "You are required to complete the following fields: ";
    if (document.form.surname.value=="") {
    themessage = themessage + " - surname";
    }
    if (document.form.first.value=="") {
    themessage = themessage + " -  First-name";
    }
    if (document.form.email.value=="") {
    themessage = themessage + " -  Email";
    }
    //alert if fields are empty and cancel form submit
    if (themessage == "You are required to complete the following fields: ") {
    document.form.submit();
    }
    else {
    alert(themessage);
    return false;
       }
    }
    //  End -->
    </script>
    
    <script type="text/javascript">
    function isValid(){
    var password = document.getElementById('password').value;
    if (password == "GEOFF")
    {alert('Correct!')}
    else
    {alert('Wrong Password')}
    }
    </script>
    FORM IN HTML:-
    Code:
    <form class="formstyle" id="form" name="form" method="post"  action="http://www.cricketcoachingclinics.com.au/cgi-bin/formmail/FormMail.pl" >
          <table  width="100%" border="0" cellspacing="12" >
            <tr>
              <td><p>SPORTS CLINIC:</p></td>
              <td><select name = "sport">
                  <option value = "Cricket">Cricket</option>
                  <option value = "Rugby">Rugby (April and July holidays only)</option>
                  <option value = "Multi-sport">Multisport</option>
                </select></td>
            </tr>
            <tr>
              <td><p>VENUE</p></td>
              <td><input type="text" name="venue" id="venue" /></td>
            </tr>
            <tr>
              <td width="31%"><p>VENUE DATES</p></td>
              <td width="68%"><select name = "date" >
                  <option value = "Moore-Pk-9-11-JULY">Moore Park 9-11 JULY 9am-2pm $240</option>
                  <option value = "St-Ives-7-9-JULY">St. Ives 7-9 JULY 9am-2pm $210</option>
                </select></td>
            </tr>
            <tr>
              <td><p>Surname </p></td>
              <td><input type="text" name="surname" id="surname" /></td>
            </tr>
            <tr>
              <td><p>First name</p></td>
              <td><input type="text" name="first" id="First-name" /></td>
            </tr>
            <tr>
              <td><p>AccessCode* Enter GEOFF</p></td>
              <td><input type="text" name="password" id = "password" /></td>
            </tr>
            <tr>
              <td><p>Age (in years &amp; months)</p></td>
              <td><input type="text" name="Age" id="Age" /></td>
            </tr>
            <tr>
              <td><p>Address</p></td>
              <td><input type="text" name="Address" id="Address" /></td>
            </tr>
            <tr>
              <td><p>Suburb</p></td>
              <td><input type="text" name="Suburb" id="Suburb" /></td>
            </tr>
            <tr>
              <td><p>Postcode</p></td>
              <td><input type="text" name="Postcode" id="Postcode" /></td>
            </tr>
            <tr>
              <td><p>Email</p></td>
              <td><input type="text" name="email" id="Email" /></td>
            </tr>
            <tr>
              <td><p>Telephone</p></td>
              <td><input type="text" name="Telephone" id="Telephone" /></td>
            </tr>
            <tr>
              <td><p>Mobile</p></td>
              <td><input type="text" name="Mobile" id="Mobile" /></td>
            </tr>
            <tr>
              <td><p>School</p></td>
              <td><input type="text" name="School" id="School" /></td>
            </tr>
            <tr>
              <td><p>Club playing for</p></td>
              <td><input type="text" name="Club" id="Club" /></td>
            </tr>
            <tr>
              <td><p>Experience – years played</p></td>
              <td><input type="text" name="Experience" id="Experience" /></td>
            </tr>
            <tr>
              <td><p>How did you find out about the coaching?</p></td>
              <td><select name = "find">
                  <option value = "Word of mouth">Word of mouth</option>
                  <option value = "Friend">Friend</option>
                  <option value = "School newsletter">School newsletter</option>
                  <option value = "Attendance at Holiday clinicss">Attendance at Holiday clinics</option>
                  <option value = "Web search">Web search</option>
                  <option value = "Other">Other</option>
                </select></td>
            </tr>
            <tr>
              <td><p>How would you like coaching correspondence to be sent?</p></td>
              <td><select name = "correspondence">
                  <option value = "Email">Email</option>
                  <option value = "Post">Post</option>
                </select></td>
            </tr>
            <tr>
              <td><p>Please tick</p></td>
              <td><p>Are you one of a group/family booking? Yes
                  <input class="radio" name="groupyes" type="radio" value="groupyes" />
                  No
                  <input class="radio" name="groupno" type="radio" value="groupno" />
                </p></td>
            </tr>
            <tr>
              <td><p>Please tick</p></td>
              <td><p>Are you booking as casual daily rate?  Yes
                  <input class="radio" name="dailyyes" type="radio" value="dailyyes" />
                  No
                  <input class="radio" name="dailyno" type="radio" value="dailyno" />
                </p></td>
            </tr>
            <tr>
              <td><p>Payment method</p></td>
              <td><p>Paypal
                  <input class="radio" name="paypal" type="radio" value="paypal" />
                  EFTPOS
                  <input class="radio" name="eftpos" type="radio" value="eftpos" />
                  Cheque
                  <input class="radio" name="cheque" type="radio" value="cheque" />
                </p></td>
            </tr>
            <tr>
              <td><p>&nbsp;</p></td>
              <td><input  name="submit" type="image" class="noborder"  id="submit"  src="http://www.codingforums.com/images/submit-over.gif" value="Log in" onclick="isValid(this);"/>
                <input type="hidden" name="recipient" value="geoff@cricketcoachingclinics.com.au"/>
                <input type="hidden" name="redirect" value="http://www.cricketcoachingclinics.com.au/thankyou.html"/></td>
            </tr>
          </table>
        </form>
    Last edited by VIPStephan; 06-12-2014 at 12:44 PM. Reason: added code BB tags

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9). The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.

    Form validation of the pattern if (document.formname.formfield.value == "") - that is blank or empty - is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. A proper name may only contain letters, hyphen, space and apostrophe. Numeric values, such as zip codes, phone numbers and dates, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.

    *NEVER* use the name/id "submit", because then your JS code can't call document.formname.submit() if you ever need to. This is why your form does not work.

    You need to add "return false" to your isValid() function. {alert('Wrong Password'); return false;} But this will not defeat bots, which simply disable Javascript. And I do not see where the function verify() is called.

    Have a look at http://www.campaignmonitor.com/blog/...a-alternatives
    and http://www.tothemoon.com/2013/01/sim...d-to-any-form/

    It is better to put the call to the verification script in the form tag. onsubmit = "verify(); isValid()">

    There is no need to pass this to the function as it is written.

    JavaScript form validation only provides convenience for users, not security. This means that JavaScript should be used as an "enhancement", not as a requirement. So your form should not be dependent on JavaScript alone to perform your validation. Instead, whatever server-side language you use to process the form (PERL, ASP, PHP, etc.) should also perform the same validation. Otherwise, people will be able to bypass your validation (and even possibly inject malicious code) simply by disabling Javascript.

    alerts are regarded as obsolete and should be used only for testing purposes. Use DOM methods to display a message to the user.

    It is a bad idea to use the same name (password) for an HTML element and a Javascript variable.

    BTW, when posting here please help us to help you by making it easier to view, copy, modify, test and debug your scripts by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.



    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 06-12-2014 at 08:09 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,622
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    In case you have overlooked it in Philip M’s lengthy post: JavaScript cannot provide any spam security because JS can be deactivated, therefore rendering it useless, and spam bots most likely don’t care about JavaScript at all, they read the HTML source code and fill out every field they come across.

    The best contemporary approach is to add a honeypot captcha.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,292
    Thanks
    10
    Thanked 583 Times in 564 Posts
    Quote Originally Posted by VIPStephan View Post
    In case you have overlooked it in Philip M’s lengthy post: JavaScript cannot provide any spam security because JS can be deactivated, therefore rendering it useless
    we can turn it on it's head: What if you need the JS to submit the form?

    we had a comment form that got lots of spam at my last job.
    i simply removed the action url from the <form>, and added a change() event to the message input: onchange="this.form.action='comments.php'; ".

    voila, stupid JS-less bots don't know where to submit, while a <noscript> informs the tiny minority of real users that they need to either enable JS to comment, or to use the manual captha form on a stand-alone page.

    before the change, we got about 20-40 spam a day. after, we got about 2-3 a week...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

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