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

Thread: Form validation

  1. #1
    New Coder
    Join Date
    Dec 2013
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Form validation

    Code:
    // js file
    function validateName() {
        var name = document.getElementById("contactname").value;
    
        if (name.length == 0) {
            producePrompt("Name is required", "namePrompt", "red");
            return false;
        }
        if (!name.match(/^[A-Za-z]+\s{1}[A-Za-z]+([\-\s'A-Za-z]+)?$/)) {
            producePrompt("First and Last name required", "namePrompt", "red");
            return false;
        } else {
    
            producePrompt("Name", "namePrompt", "#000000");
            return true;
        }
    }
    
        function validatePhone() {
    
            var phone = document.getElementById("telephone").value;
    
            if (phone.length == 0) {
                producePrompt("Phone number is required", "phonePrompt", "red");
                return false;
            }
            else if (phone.length < 10) {
                producePrompt("Please include area code", "phonePrompt", "red");
                return false;
            }
            else if (phone.length > 11) {
                producePrompt("Please include area code", "phonePrompt", "red");
                return false;
            }
            else if (!phone.match(/^[0-9]{10, 11}$/)) {
                producePrompt("Please enter a valid phone number", "phonePrompt", "red");
                return false;
            }
            else {
                producePrompt("Telephone number", "phonePrompt", "#000000");
                return true;
            }
        }
    
        function validateEmail() {
            var email = document.getElementById("email").value;
    
            if (email.length == 0) {
                producePrompt("Email is required", "emailPrompt", "red");
                return false;
            }
            if (!email.match(/^[A-Za-z\._\-0-9]+[@][A-Za-z]+[\.][a-z]{2,}(\.[a-z]{2,})?$/)) {
                producePrompt("Email address invalid", "emailPrompt", "red");
                return false;
            }
            else {
                producePrompt("Email Address", "emailPrompt", "#000000");
                return true;
            }
        }
    
        function validateDetails() {
            var details = document.getElementById("details").value;
    
            if (details.length == 0) {
                producePrompt("Please enter as much detail as possible", "detailsPrompt", "red");
                return false;
            }
    
            if (details.length < 20) {
                producePrompt("Please enter more details", "detailsPrompt", "red");
                return false;
            }
            else {
                producePrompt("How can we help", "detailsPrompt", "#000000");
                return true;
    
            }
        }
    
        function timeToCall() {
    
            var calltime = document.getElementsByName("timetocall");
    
            for (var x = 0; x < calltime                  .length; x++) {
                if (calltime[x].checked == false) {
                    producePrompt("Please select an appropriate time for us to contact you", "timePrompt", "red");
                    return false;
                } else {
                    return true;
                    
                }
            }
        }
    
    
    
            function tandcs() {
    
                var terms = document.getElementById("tandc");
    
                if (tandc.checked == false) {
                    producePrompt("For us to provide the best possible service please agree to our terms and conditions", "tandcPrompt", "red");
                    return false;
                } else {
                    return true;
                }
    
    
            }
    
    
            function producePrompt(message, promptLocation, color) {
                document.getElementById(promptLocation).innerHTML = message;
                document.getElementById(promptLocation).style.color = color;
            }
        
    
            function validateForm() {
    
                if (validateName() == true) {
                    return true;
                }
                else if (validateEmail() == true) {
                    return true;
                }
                else if (validatePhone() == true) {
                    return true;
                }
                else if (validateDetails() == true) {
                    return true;
                }
                else if (tandcs() == true) {
                    return true;
                }
                else if (timeToCall() == true) {
                    return true;
                }
                else {
                    alert("Please fill in all required feilds");
                    if (eventObj.preventDefault) {
                        eventObj.preventDefault();
                    } else {
                        window.event.returnValue = false;
                    }
                    return false;
                }
    
            }
    // js file end
    // html form begin
    
    <form action="#"  class="contact" name="contactUs" id="contactform" onsubmit="return validateForm()">
            <fieldset>
              <legend>Arrange a call back</legend>
                <p>Please enter your contact details:</p>
              <div>
               
                  <label for="name" class="fixedwidth" id="namePrompt">Name</label> <input type="text" name="name" id="contactname" />
              </div>
              <div>
                
                  <label for="telephone" class="fixedwidth" id="phonePrompt" >Telephone number</label><input type="text" name="telephone" id="telephone"  />
                  
              </div>
              <div>
                
                  <label for="email" class="fixedwidth" id="emailPrompt">Email Address</label><input type="text" name="email" id="email"  />
              </div>
                
              <div>
                
                <label for="details" class="fixedwidth" id="detailsPrompt" >How can we help?</label>
                <textarea id="details" name="details" cols="30" rows="7" ></textarea>
              </div>
              <div>
                <p>What would be the best time to call you on the number supplied?</p>
                  <label for="timetocall" id="no_pref">No Prefference</label><input type="radio" name="timetocall" id="nopref" value="nopref" />
                  <label for="timetocall" id="morn">Morning(8-12)</label><input type="radio" name="timetocall" id="morning" value="morning" />          
                  <label for="timetocall" id="after">Afternoon(12-4)</label><input type="radio" name="timetocall" id="afternoon" value="afternoon"  />            
                  <label for="timetocall" id="eve">Evening(4-8)</label><input type="radio" name="timetocall" id="evening" value="evening"  />
                  <label for="timetocall" id="timePrompt"></label>
                
              </div>
                <div>
                    <p>Treffgarne Capital Funding may need to share some of your details with third parties. Information about you will not be used in any way harmful to you or your brand. By clicking agree, you agree to our terms of service.
                     
                    <input type="checkbox" name="tandc" id="tandc" /><label for="tandc" id="tandcPrompt"></label></p>
                </div>
              <div class="buttonarea">
                <input type="submit" value="Send"/>
              </div>
            </fieldset>
             
          </form>
    
    //html form end

    I am really struggling with this at the moment its really not going well lol

  • #2
    New Coder
    Join Date
    Dec 2013
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    and any assistance rendered would be gratefully recieved

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    You should tell us a little bit
    about what you had hoped
    the code would do and what
    it fails to do.
    Right off I see this problem ...

    document.getElementById(promptLocation).innerHTML = message;
    document.getElementById(promptLocation).style.color = color;

    of course you may have more
    problems than just this.

  • #4
    New Coder
    Join Date
    Dec 2013
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    One of the problems I am having is when the form is submitted if the fields are not filled in properly it is supposed to stop the form submitting and is supposed to display the appropriate messages to the user. but from what I can work out that is not happening.

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    validateForm should look more like this ...

    Code:
     
     function validateForm() {
      var n=validateName();
      var e=validateEmail();
      var p=validatePhone();
      var d=validateDetails();
      var t=tandcs();
      
      var c=timeToCall()
                if (n && e && p && d && t && c ) {
                    return true;
                }
                else {
                    alert("Please fill in all required feilds");                
                    return false;
                }
             }
    <label for=" the ID not the NAME ! "

    Maybe you should change this ...

    Code:
    var terms = document.getElementById("tandc");
    
    if (tandc.checked == false) {
    In these two functions you have
    not included the producePrompt
    that would have cleared the error
    message

    Code:
    function timeToCall() {
    
            var calltime = document.getElementsByName("timetocall");
    
            for (var x = 0; x < calltime                  .length; x++) {
                if (calltime[x].checked == false) {
                    producePrompt("Please select an appropriate time for us to contact you", "timePrompt", "red");
                    return false;
                } else {
                    return true;
                    
                }
            }
        }
    
    
    
            function tandcs() {
    
                var terms = document.getElementById("tandc");
    
                if (tandc.checked == false) {
                    producePrompt("For us to provide the best possible service please agree to our terms and conditions", "tandcPrompt", "red");
                    return false;
                } else {
                    return true;
                }
    
    
            }
    We welcome questions of a specific
    nature and always answer them carefully
    and thoughtfully but overly general
    questions (like what's wrong with the
    code on my web page) are sometimes
    ignored.
    Last edited by DaveyErwin; 12-31-2013 at 01:52 AM.

  • Users who have thanked DaveyErwin for this post:

    GriffithsWebDes (12-30-2013)


  •  

    Posting Permissions

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