www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Problem with validation function - not alerting

  1. #1
    Join Date
    Apr 2014
    Posts
    44

    resolved [RESOLVED] Problem with validation function - not alerting

    Hello all, I've got a new problem now. When I first build this form my validation form was working, but it started to get more and more complex and now it no longer alerts a message and stops submission. I can't figure out where the problem lies. Here's the code.

    PHP Code:
    //HTML - the form
    <form method="post" name="pizzaOrderForm" action="http://programs.siast.sk.ca/newmedia/onlinescripts/pizzaorder_olympic.php" target="_blank" onsubmit="return validateForm();">
        <
    h3>Please enter your contact information:</h3>
            <
    p><label for="FirstName_tf">First Name: </label><input name="FirstName_tf" id="FirstName_tf" type="text"></p>
            <
    p><label for="LastName_tf">Last Name: </label><input name="LastName_tf" id="LastName_tf" type="text"></p>
            <
    p><label for="Address_tf">Address: </label><input name="Address_tf" id="Address_tf" type="text"></p>
            <
    p><label for="Phone_tf">Phone: </label><input name="Phone_tf" id="Phone_tf" type="text"></p>
            <
    p><label for="Email_tf">Email: </label><input name="Email_tf" id="Email_tf" type="text"></p>
          
        <
    h3>What size of pizza would you like to order?</h3>
              <
    p><label onchange="calc()"><input type="radio" name="Size_rg" id="4" value="4" />Small 10" ($4.00)</label></p>
            <p><label onchange="
    calc()"><input type="radio" name="Size_rg" id="5" value="5" />Medium 12" ($5.00)</label></p>
            <
    p><label onchange="calc()"><input type="radio" name="Size_rg" id="7" value="7" />Large 15" ($7.00)</label></p>
          
        <h3>What toppings would you like? All are $0.50 to add.</h3>
          <div id="
    checkboxes">
            <p><input id="
    Anchovies_cb" type="checkbox" value="0.50" onchange="calc()" /><label for="Anchovies_cb">Anchovies</label></p>
            <p><input id="
    DoubleCheese_cb" type="checkbox" value="0.50" onchange="calc()" /><label for="DoubleCheese_cb">Double Cheese</label></p>
            <p><input id="
    Pepperoni_cb" type="checkbox" value="0.50" onchange="calc()" /><label for="Pepperoni_cb">Pepperoni</label></p>
            <p><input id="
    Mushroom_cb" type="checkbox" value="0.50" onchange="calc()" /><label for="Mushroom_cb">Mushrooms0</label></p>
          </div>
          
        <h3>Please select a payment method from the selection box.</h3>
             <select id="
    Payment_menu" size="4">
              <option value="
    select">- Select Payment Method -</option>
              <option value="
    cash">Cash</option>
              <option value="
    debit">Debit</option>
              <option value="
    credit">Credit</option>
          </select>
        
        <h3>Your order cost information:</h3>
        <p><label for="
    SubTotal_tb">Subtotal: $</label>
          <input type="
    text" name="SubTotal_tb" id="SubTotal_tb" value="" readOnly=true />
        <p><label for="
    PST_tb">PST: $</label>
          <input type="
    text" name="PST_tb" id="PST_tb" value="" readOnly=true />
        <p><label for="
    GST_tb">GST: $</label>
          <input type="
    text" name="GST_tb" id="GST_tb" value="" readOnly=true />
        <p><label for="
    Total_tb">TOTAL: $</label>
          <input type="
    text" name="Total_tb" id="Total_tb" value="" readOnly=true />
        
       <p><input type="
    submit" name="Submit_but"></p>
    </form>

    //the Javascript
    function validateForm() {
        //assume that the form will have no errors. Set a variable to Boolean true.
    var okay = true; 
        //Declare and initialize a variable to hold a message for the user.
    var message = ""; 
        
        /*********** check the text fields ********************/
        
        //Start at the beginning of the form and check to see if the field is blank
        //that is to say, the value in each field is either null or an empty string ""
        if (document.getElementById("
    FirstName_tf").value == null || document.getElementById("FirstName_tf").value == "") {
            //The field is empty; set the Boolean variable to false
                    okay = false; 
            //add text to the user message that explains the error
            message += "
    Please fill in the First Name field.\n";
        }
        //check the next field... 
        if (document.getElementById("
    LastName_tf").value == null || document.getElementById("LastName_tf").value == "") {
            //The field is empty; set the Boolean variable to false
            okay = false; 
            //add text to the user message that explains the error
            message += "
    Please fill in the Last Name field.\n";
        }
        //check the next field... 
        if (document.getElementById("
    Address_tf").value == null || document.getElementById("Address_tf").value == "") {
            //The field is empty; set the Boolean variable to false
            okay = false; 
            //add text to the user message that explains the error
            message += "
    Please fill in the Address field.\n";
        }
        //check the next field... 
        if (document.getElementById("
    Phone_tf").value == null || document.getElementById("Phone_tf").value == "") {
            //The field is empty; set the Boolean variable to false
            okay = false; 
            //add text to the user message that explains the error
            message += "
    Please fill in the Last Name field.\n";
        }
        //check the next field... 
        var pattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        //Pattern taken from [url]http://www.w3resource.com/javascript/form/email-validation.php[/url] -- No author is given.
        if (!pattern.test(document.getElementById('Email_tf').value)) {
            //The field is empty; set the Boolean variable to false
            okay = false; 
            //add text to the user message that explains the error
            message += "
    Please enter a valid address into the E-Mail field.\n";
        }
        
        /*********** check the radio inputs ********************/
        
        //assume that no button is selected. 
        var radioSelected = false; 
        //Start at the beginning of the radio buttons section and check to see if a radio input is checked
        if (document.getElementById("
    4").checked) {
            //the button is checked, set selected to true
            radioSelected = true; 
        }
        //check the radio input...  
        if (document.getElementById("
    5").checked) {
            //the button is checked, set selected to true
            radioSelected = true;
        }
        //check the radio input...  
        if (document.getElementById("
    7").checked) {
            //the button is checked, set selected to true
            radioSelected = true;
        }
        //If after checking all the buttons, selected is still false, there is a problem. 
        if (!radioSelected) {
            //Set okay to false
            okay = false; 
            //add to the message 
            message += "
    Please select the size of pizza.\n"; 
        }
        
        /*********** check the payment selection ********************/
        
        //In a select element, you know what has been selected by getting the selectedIndex
        //In this select, if the user has not picked an age, the selected index will be zero
        //That is because we have put a prompting message --Please select age group -- at index 0 of the select. 
        //assume everything is okay; set okay to true. 
        var okay = true;
        if(document.getElementById("
    Payment_menu").selectedIndex == 0) {
            //set okay to false
            okay = false; 
            //add to the message
            message += "
    Please select a payment method.\n";
            
        }     
        
        
        //If the Boolean is no longer true, there were problems with the form. Alert the message. Otherwise, don't do anything. 
        if (!okay) {
            alert(message); 
        } 
        //return the Boolean.
        return okay;  

    Does anyone know what this won't alert the message instead of submitting?

  2. #2
    Join Date
    Jul 2011
    Posts
    131
    1. You have such code in the end of your function:
    Code:
        //In a select element, you know what has been selected by getting the selectedIndex 
        //In this select, if the user has not picked an age, the selected index will be zero 
        //That is because we have put a prompting message --Please select age group -- at index 0 of the select.  
        //assume everything is okay; set okay to true.  
        var okay = true;
    I don't think that it is correct, because it overrides all previous validation.

    2. The next line is:
    Code:
    if(document.getElementById("Payment_menu").selectedIndex == 0) {
    selectedIndex will be equal to 0 if the first element from the list is selected. If nothing selected - selectedIndex will be -1.

    These two things break your validation.

  3. #3
    Join Date
    Apr 2014
    Posts
    44
    Thanks for the assistance. I understand the first bit of code, don't reset the var okay, but I don't understand the second part of code you pointed out. I don't get what's wrong with it or what I'm supposed to do about it. A little extra help, please?

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,031
    kromol was noting that when you try to validate your payment method select input, you are checking if the selectedIndex is equal to 0, and if so you invalidate the form and set an error message. But the selectedIndex of 0 is not the default value, -1 is. Thus you should be checking if the selectedIndex is equal to -1 rather than 0.

  5. #5
    Join Date
    Apr 2014
    Posts
    44
    Okay, that helped a bit more. I've make the corrections to my form and it seems to be working (in regards to the question here), so thank you both!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles