JavaScript Validation

Question

I am a little confused here. I have most of my form completed. I just need help with getting the value of my select boxes and a function for calculating those values. Along with a code displaying an error message if a check box is not selected.

/* Starts an Array reference to set prices on Events */

var aaffa_Price = new Array();
    aaffa_Price ["AAFFA Membership"] = 45;
    aaffa_Price ["Early Registration"] = 135;
    aaffa_Price ["Registration"] = 150;
    aaffa_Price ["Early Mini Camp"] = 35;
    aaffa_Price ["Mini Camp"] = 40;
    aaffa_Price ["Three Mini Camp Special"] = 90;

/* This function validates selected events values and totals up the cost  */    
function getaaffaTotalCost()
{
    var aaffa_Cost = 0;
    var myForm = document.forms["aaffaForm"];
    var selectedEvent = myForm.elements["selectedEvent"];

    aaffa_Cost += aaffa_Price[selectedEvent.value];

    return aaffa_Price;
}

    function calcTotal()
    {
        var aaffa_Price = getaaffaTotalCost();

        var divobj = document.getElementById('eventsTotalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Registration $"+aaffa_Cost;
        }
function aaffaDisplay(aaffa)
{
    var selAAffa = document.getElementById("spryselect1");
    var selAAp = document.getElementById("spryselect2");                
    var girlsRad=document.getElementById("League_0");{
    var boysRad=document.getElementById("League_1");
        if (girlsRad.checked){
            return true
            selAAffa.hidden=false
            }
        selAAffa.hidden=true
        }   

    }       
<body>


  <div class="container">
    <div class="header">
      <!-- end .header -->
    </div>
    <div class="content">
      <form action="mailto:info.aaffa@gmail.com" method="post" enctype="text/plain" target="_parent" id="myForm" name: "aaffa" onsumbit="return validate(this);">
        <div class="league">
          <fieldset>
            <legend><em>Select A League</em>
            </legend>
            <span id="spryradio1">
                    <label>
                        <input type="radio" name="League" value="Girls" id="League_0" onchange="aaffaDisplay" />
                        AAFFA</label>

                    <label>
                        <input type="radio" name="League" value="Boys" id="League_1" />
                        Boys Passing</label>
                    <br />
                    <span class="radioRequiredMsg">Please make a selection.</span></span>
          </fieldset>
          <br />
        </div>
        <div class="AA Events">
          <fieldset>
            <legend><em>ALL American Events</em>
            </legend>
            <span id="sprytrigger1">Select more than one?</span>
            <div class="tooltipContent" id="sprytooltip1">Hold ctrl to select more than one choice</div>
            <span id="spryselect1"><br />

                    <select name="girlsEvent" id="aaffa" multiple="multiple" onchange="addTotal">
                        <option value="000" name="Select AAFFA Events" selected="selected"><strong><strong>AAFFA Events</strong></strong></option>
                        <option value="$45.00" name="All American Flag Football Memebership" onchange="addTotal">All American Memebership</option>
                        <option value="$135.00" name="Early Girl's Flag Football Registration">Early Girl's Flag Football Registration</option>
                        <option value="$150.00" name="Girl's Flag Football Registration" >All American Memebership</option>
                        <option value="$35.00" name="Early Mini Camp Registration Girls">Early Mini Camp Registration</option>
                        <option value="$40.00" name="Mini Camp Registration Girls">Mini Camp Registration</option>
                        <option value="$90.00" name="3 Mini Camp Special Registration Girls">3 Mini Camp Special Registration</option>
                    </select><<label for="girlsevent"></label>
                    <span class="selectRequiredMsg">Please select an item.</span>


            <span id="spryselect2">
                    <select name="boysEvents" id="aapl" multiple="multiple" onchange="addTotal">
                        <option value="000" name="Select AA Pride Events" selected="selected">AA Pride Events</option>
                        <option value="$45.00" name="All American Pride Memebership" onchange="addTotal">All American Pride Memebership</option>
                        <option value="$135.00" name="Early Boys Passing League Registration">Early Boys Passing League Registration</option>
                        <option value="$150.00" name="All American Pride Flag Football Registration" >All American Memebership</option>
                        <option value="$35.00" name="Early Mini Camp Boys">Boys Early Mini Camp Registration</option>
                        <option value="$40.00" name="Mini Camp Registration Boys">Mini Camp Registration</option>
                        <option value="$90.00" name="3 Mini Camp Special Registration Boys">3 Mini Camp Special Registration</option>
                    </select> <br /><label for="event"></label>
                    <span class="selectRequiredMsg">Please select an item.</span></span>
            <br />
            <br />

            <input type="text" name="aaffaTotal" id="aaffaTotal" placeholder=" " />
            <input type="text" name="aapTotal" id="aapTotal" placeholder=" " />
          </fieldset>

        </div>
        <div class="Boys Events">



        </div>

        <div class="contactInfo">
          <fieldset>
            <fieldset>
              <legend><em>Contact Info</em>
              </legend>
              First Name:
              <br />
              <input name="fName" type="text" required="required" class="input" size="30" maxlength="15" placeholder="First Name" id="confName" tabindex="9" />
              <br />Last Name:
              <br />
              <input name="lname" type="text" required="required" class="input" size="30" maxlength="45" placeholder="Last Name" id="conlName" tabindex="10" />
              <br />Street:
              <br />
              <input name="street" type="text" required="required" class="input" size="35" maxlength="45" tabindex="11" />
              <br />
              <label for="city">City:</label>
              <select name="city" class="select" id="city" tabindex="12">
                <option value="000">None</option>
                <option value="1">Boulder City</option>
                <option value="2">Green Valley</option>
                <option value="3">Henderson</option>
                <option value="4">Las Vegas</option>
                <option value="5">North Las Vegas</option>
              </select>
              State:
              <input name="state" required="required" size='4' class="content" value="N.V." tabindex="13" />Zip Code:
              <input type="text" name="zipCode" required="required" tabindex="14" size="15" pattern="(\d{5}([\-]\d{4})?)" maxlength="10" />
              <br />
              <br/>E-Mail:
              <input type="text" name: "email" required="required" class="input" size="35" maxlength="50" />Phone #:
              <input name="Contact Number" type="tel" required="required" size="12" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="777-777-7777" maxlength="13" />
              <br/>
              <div class="emerContactInfo">


                <br />
                <fieldset>
                  <legend>Emergency Contact</legend>
                  First Name:
                  <br />
                  <input name="pfname" type="text" required="required" class="input" size="30" maxlength="15" placeholder="Parent's First Name" tabindex="9" />
                  <br />Last Name:
                  <br />
                  <input name="plname" type="text" required="required" class="input" size="30" maxlength="45" placeholder="Last Name" tabindex="10" />
                  <br />
                  <label>Address:
                    <br />
                  </label>
                  <label>City:
                    <input name="pcity" type="text" required="required" class="input" size="35" maxlength="45" tabindex="11" />
                  </label>
                  <label>State:
                    <br />
                    <input name="pstate" type="text" required="required" class="input" size="35" maxlength="45" tabindex="11" />
                  </label>
                </fieldset>

              </div>

              <p>
                <!-- Load jQuery from Google's CDN -->
                <!-- Load jQuery UI CSS  -->

                <input name="pstreet" type="text" required="required" class="input" size="35" maxlength="45" tabindex="11" />
                <br/>
                <br/>
                <input type="submit" value="Submit" onclick="return getaaffaTotalCost()" />
                <input type="button" value="reset" />
              </p>
              <p>&lt;</p>
            </fieldset>
      </form>
      <!-- end.contactInfo -->
      </div>
      <!-- end .content -->
    </div>

Are you talking about drop down list ? As you have not used checkbox in your code. And FYI you don't need to write required ="required" .Writing only required in input tag will also work. In html we also have input type="email" which can check basic email syntax for u. — Abhishek Panjabi, May 07 '16 at 15:04
In your title you write `JavaScript Validation`, but you don't show any JavaScript code where you try to do the validation. When asking questions you should show what you have tried already. Beside that you should always make sure that the code your show is valid. Your html code is full of errors. e.g. `name: "email"` instead of `name="email"`, a `select` is not a valid child of `span` and others. — t.niese, May 07 '16 at 15:05
http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript this will help you, and I suggest using jQuery because it can make life much easier with DOM manipulations — Abdul Ahmad, May 07 '16 at 15:07
I forgot I would also like to hide or disable one of the selection boxes when a user selects a radio box. — HammerTime, May 07 '16 at 16:05

score 0 · Answer 1 · answered May 07 '16 at 16:37

0

Sounds like there are a lot of questions lumped together here. Break down your problem, try to answer each question individually on your own, and if you get stuck then create another stackoverflow question!

get value of select box in javascript
"calculate those values" - you'll have to clarify that one for yourself before you attempt to solve it
check if checkbox is selected
"display error message" - you'll also have to break that down. i.e. perhaps: create html element in javascript + add text to html element in javascript

Though you haven't mentioned these, in order to validate a form you generally also need to figure out how to:

trigger a javascript function on the submission of an html form
prevent an html form from submitting

That should get you started! Good luck!

answered May 07 '16 at 16:37

danyamachine

1,848
1
18
21

Ok this is what I have so far. I am using an array to cycle through each selection option and my trigger is my submit button to validate the form. As for my select option I am using the onchange method in order to update the value as each option is selected. I more or less can figure out the rest. I'm just having trouble with the radio boxes and calculating the total cost. Along with validating that at least one select option is selected. I have two select boxes one is for the Girl's Flag Football and the other is for the boys Passing league. I have thought just combining both in one selection – HammerTime May 07 '16 at 19:34
However, I thought it be easier to hide an element when the user checks a radio option rather than disabling those options that are for the other gender. – HammerTime May 07 '16 at 19:35

JavaScript Validation

1 Answers1