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 3 of 3

Thread: Form validation

  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form validation

    Hi Everyone
    I'm very new to javascript and website design in general.

    My form validation works fine in internet explorer but not in firefox or chrome, and I was wondering if anyone could look at my code and give me some advice to get it working.

    This is my javascript

    PHP Code:
    function validate() {
        if(
    document.contactForm.Name.value == '')
        {
            
    alert("Please fill in your name");
            return 
    false;
        }
        if(
    document.contactForm.Email.value == '')
        {
            
    alert("Please fill in your email address");
            return 
    false;
        }
        if(
    document.contactForm.Phone.value == '')
        {
            
    alert("Please fill in your phone number");
            return 
    false;
        }
        if(
    document.getElementById("contactType").value == "")
        {    
            
    alert("Please select an enquiry type from the drop down list.");
            return 
    false;
        }
        var 
    email_checked document.getElementById("ContactByEmail").checked;
        var 
    phone_checked document.getElementById("ContactByPhone").checked;
        if(
    email_checked == "" && phone_checked == "")    
        {
            
    alert('Please select a preferred contact type');
            return 
    false;
        } 
    }
    function 
    contactTypeInfo()
    {
        var 
    contactTypeOption document.getElementById("contactType").value;
        
        if(
    contactTypeOption=="general"){
            
    alert("You have chosen general enquiry.  Please type your message into the message box below.");
            return 
    true;
            }
            else
            if(
    contactTypeOption=="bookCourse"){
            
    alert("You have chosen to book into a course.  Please let me know which course you would like to book in the message box below.");
            return 
    true;
            } else
            if(
    contactTypeOption=="Book1on1"){
            
    alert("You have chosen to book one on one tuition.  Please let me know  the days and times which would suit you and what you like to learn during the lesson in the message box below.");
            return 
    true;
            } else
            if(
    contactTypeOption=="competition"){
            
    alert("You have chosen to enter the competition.  Please use the browse button below to upload a scanned picture of your scrapbook page.");
            return 
    true;
            }

    and this is my form

    Code:
        <form action="#" method="get" enctype="multipart/form-data" name="contactForm" id="contactForm" onsubmit="validate(); return false">
          <table width="96%" border="0">
          <tr>
            <td width="34%">Name</td>
            <td width="66%">
            <input name="Name" type="text" id="Name" size="40"></td>
          </tr>
          <tr>
            <td>Email</td>
            <td>
            <input name="Email" type="text" id="Email" size="40" placeholder="for example name@hotmail.com" pattern="([a-z0-9][-a-z0-9_\+\.]*[a-z0-9])@([a-z0-9][-a-z0-9_\+\.]*[a-z0-9])"></td>
          </tr>
          <tr>
            <td>Phone</td>
            <td>
            <input name="Phone" type="text" id="Phone" size="40"></td>
          </tr>
          <tr>
            <td>What is your enquiry regarding</td>
            <td><select id="ContactType" name="ContactType" onchange="contactTypeInfo()">
                    <option value="">--- Select ---</option>
                     <option value="general">General enquiry</option>
                     <option value="bookCourse">Book into a course</option>
                     <option value="Book1on1">Book one on one tuition</option>
                     <option value="competition">Enter the competition</option>
                </select>
           </td>
          </tr>
          <tr>
            <td>Upload file</td>
            <td>
              <input name="Upload" type="file" id="Upload" size="30"></td>
          </tr>
          
          <tr>
            <td>Message</td>
            <td>
            <textarea name="Message" id="Message" cols="45" rows="5"></textarea></td>
          </tr>
          <tr>
            <td>Preferred Contact type</td>
            <td><input id="ContactByEmail" name="ContactBy" value="Email" type="radio">
            Email <br />
            <input id="ContactByPhone" name="ContactBy"  value="Phone" type="radio">
            Phone <br /></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><input value="Submit form" type="submit">
              <input type="reset" value="Reset form"></td>
          </tr>
          </table>
      </form>
    Any help greatly appreciated.
    Thanks very much
    Sarah
    Last edited by VIPStephan; 04-30-2014 at 10:06 AM. Reason: added code BB tags

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    108
    Thanks
    5
    Thanked 17 Times in 17 Posts
    Why re-invent the wheel, I would just use a existing jQuery plugin to validate a form: jQuery Validation Plugin | Form validation with jQuery – this site is a work in progress.

    I also notice you're using tables, ditch them. Here's a good link: http://www.smashingmagazine.com/2011...ing-web-forms/ Smashing Magazine has a lot of good resources for developing and designing websites.
    Last edited by Strider64; 04-30-2014 at 07:35 AM.
    True courage is about knowing not when to take a life, but when to spare one. PDO Tutorial

  • #3
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much for your ideas and links. I figured out I had put if(document.getElementById("contactType").value == "") instead of if(document.getElementById("ContactType").value == "").

    <sigh> :-)


  •  

    Posting Permissions

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