2 Replies Latest reply: Aug 9, 2011 7:58 AM by jpodlesnik1 RSS

    Required form fields - help.

    jpodlesnik1 Community Member

      Hello:

       

      Knowing next to nothing about html code, Javascript and submission forms, I was hoping to make the following form fields below mandatory.

      Below is the script for doing so and below that the form. Can someone please adjust the form below (to work with the Javscript) so that it will function, so that I can just copy the adjusted code, paste it all into the form page and be on my way? Any help would be appreciated.

       

      Thanks,

      --Joe

       


      First Name
      Last Name
      Title
      Facility/Practice Name
      Daytime Phone
      Evening Phone
      Email

       

       

       


      <script language="JavaScript">
      <!--

       

      /***********************************************
      * Required field(s) validation v1.10- By NavSurf
      * Visit Nav Surf at http://navsurf.com
      * Visit http://www.dynamicdrive.com/ for full source code
      ***********************************************/

       

      function formCheck(formobj){
          // Enter name of mandatory fields
          var fieldRequired = Array("FirstName", "LastName");
          // Enter field description to appear in the dialog box
          var fieldDescription = Array("First Name", "Last Name");
          // dialog message
          var alertMsg = "Please complete the following fields:\n";
         
          var l_Msg = alertMsg.length;
         
          for (var i = 0; i < fieldRequired.length; i++){
              var obj = formobj.elements[fieldRequired[i]];
              if (obj){
                  switch(obj.type){
                  case "select-one":
                      if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
                          alertMsg += " - " + fieldDescription[i] + "\n";
                      }
                      break;
                  case "select-multiple":
                      if (obj.selectedIndex == -1){
                          alertMsg += " - " + fieldDescription[i] + "\n";
                      }
                      break;
                  case "text":
                  case "textarea":
                      if (obj.value == "" || obj.value == null){
                          alertMsg += " - " + fieldDescription[i] + "\n";
                      }
                      break;
                  default:
                  }
                  if (obj.type == undefined){
                      var blnchecked = false;
                      for (var j = 0; j < obj.length; j++){
                          if (obj[j].checked){
                              blnchecked = true;
                          }
                      }
                      if (!blnchecked){
                          alertMsg += " - " + fieldDescription[i] + "\n";
                      }
                  }
              }
          }

       

          if (alertMsg.length == l_Msg){
              return true;
          }else{
              alert(alertMsg);
              return false;
          }
      }
      // -->
      </script>

       

       

       

       

       

       

       

       

       


      <form id="wstForm_Contact" name="Contact Form" action="%wstx.formmailerurl%" method="post" labelid="formLabel_ContactForm">
          <table width="100%" cellspacing="1" cellpadding="5" class="contactFormTable">
              <tbody>
                  <tr>
                      <td align="center" style="font-size: 8pt; text-decoration: none; font-weight: normal;">
                      <table width="90%" cellspacing="0" cellpadding="3" border="0" class="contactFormTable">
                          <tbody>
                              <tr>
                                  <td align="center" style="font-size: 12pt; font-weight: bold;">
                                  <font face="Palatino Linotype, Book Antiqua, Palatino, serif"><span id="formLabel_ContactForm" controlid="wstForm_Contact">Contact Us</span><br />
                                  </font>
                                  </td>
                              </tr>
                              <tr>
                                  <td style="font-size: 8pt; text-decoration: none; font-weight: normal; padding-bottom: 10px;">
                                  <p style="text-align: justify;">
                                  <font face="Palatino Linotype, Book Antiqua, Palatino, serif" style="font-size: 13px;">In this area, you can enter text about your contact form. You may want to explain what happens after a visitor submits the form and include a contact phone number.</font>
                                  </p>
                                  </td>
                              </tr>
                          </tbody>
                      </table>
                      <table width="90%" cellspacing="1" cellpadding="3" border="0" class="contactFormTable">
                          <tbody>
                              <tr>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <span id="formLabel_First" controlid="formElement_First">First Name:</span>
                                  </td>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <input id="formElement_First" name="First Name" labelid="formLabel_First" />
                                  </td>
                              </tr>
                              <tr>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <span id="formLabel_Last" controlid="formElement_Last">Last Name:</span>
                                  </td>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <input id="formElement_Last" name="Last Name" labelid="formLabel_Last" />
                                  </td>
                              </tr>
                              <tr>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <span id="formLabel_Last" controlid="formElement_Last">Title:</span>
                                  </td>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <input id="formElement_Last" name="Title" labelid="formLabel_Last" />
                                  </td>
                              </tr>
                              <tr>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <span id="formLabel_Last" controlid="formElement_Last">Facility/Practice Name:</span>
                                  </td>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <input id="formElement_Last" name="Facility/Practice Name" labelid="formLabel_Last" />
                                  </td>
                              </tr>
                              <tr>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <span id="formLabel_Street1" controlid="formElement_Street1">Address Street 1:</span>
                                  </td>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <input id="formElement_Street1" size="30" name="Address Street 1" labelid="formLabel_Street1" />
                                  </td>
                              </tr>
                              <tr>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <span id="formLabel_Street2" controlid="formElement_Street2">Address Street 2:</span>
                                  </td>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <input id="formElement_Street2" size="30" name="Address Street 2" labelid="formLabel_Street2" />
                                  </td>
                              </tr>
                              <tr>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <span id="formLabel_City" controlid="formElement_City">City:</span>
                                  </td>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <input id="formElement_City" name="City" labelid="formLabel_City" />
                                  </td>
                              </tr>
                              <tr>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <span id="formLabel_Zip" controlid="formElement_Zip">Zip Code:</span>
                                  </td>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <input id="formElement_Zip" size="5" name="Zip Code" maxlength="5" labelid="formLabel_Zip" /> (5 digits)
                                  </td>
                              </tr>
                              <tr>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <span id="formLabel_State" controlid="formElement_State">State:</span>
                                  </td>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <select id="formElement_State" name="State" labelid="formLabel_State">
                                  <option value="AL">
                                  AL
                                  </option>
                                  <option value="AK">
                                  AK
                                  </option>
                                  <option value="AZ">
                                  AZ
                                  </option>
                                  <option value="AR">
                                  AR
                                  </option>
                                  <option value="CA">
                                  CA
                                  </option>
                                  <option value="CO">
                                  CO
                                  </option>
                                  <option value="CT">
                                  CT
                                  </option>
                                  <option value="DE">
                                  DE
                                  </option>
                                  <option value="DC">
                                  DC
                                  </option>
                                  <option value="FL">
                                  FL
                                  </option>
                                  <option value="GA">
                                  GA
                                  </option>
                                  <option value="HI">
                                  HI
                                  </option>
                                  <option value="ID">
                                  ID
                                  </option>
                                  <option value="IL">
                                  IL
                                  </option>
                                  <option value="IN">
                                  IN
                                  </option>
                                  <option value="IA">
                                  IA
                                  </option>
                                  <option value="KS">
                                  KS
                                  </option>
                                  <option value="KY">
                                  KY
                                  </option>
                                  <option value="LA">
                                  LA
                                  </option>
                                  <option value="ME">
                                  ME
                                  </option>
                                  <option value="MD">
                                  MD
                                  </option>
                                  <option value="MA">
                                  MA
                                  </option>
                                  <option value="MI">
                                  MI
                                  </option>
                                  <option value="MN">
                                  MN
                                  </option>
                                  <option value="MS">
                                  MS
                                  </option>
                                  <option value="MO">
                                  MO
                                  </option>
                                  <option value="MT">
                                  MT
                                  </option>
                                  <option value="NE">
                                  NE
                                  </option>
                                  <option value="NV">
                                  NV
                                  </option>
                                  <option value="NH">
                                  NH
                                  </option>
                                  <option value="NJ">
                                  NJ
                                  </option>
                                  <option value="NM">
                                  NM
                                  </option>
                                  <option value="NY">
                                  NY
                                  </option>
                                  <option value="NC">
                                  NC
                                  </option>
                                  <option value="ND">
                                  ND
                                  </option>
                                  <option value="OH">
                                  OH
                                  </option>
                                  <option value="OK">
                                  OK
                                  </option>
                                  <option value="OR">
                                  OR
                                  </option>
                                  <option value="PA">
                                  PA
                                  </option>
                                  <option value="RI">
                                  RI
                                  </option>
                                  <option value="SC">
                                  SC
                                  </option>
                                  <option value="SD">
                                  SD
                                  </option>
                                  <option value="TN">
                                  TN
                                  </option>
                                  <option value="TX">
                                  TX
                                  </option>
                                  <option value="UT">
                                  UT
                                  </option>
                                  <option value="VT">
                                  VT
                                  </option>
                                  <option value="VA">
                                  VA
                                  </option>
                                  <option value="WA">
                                  WA
                                  </option>
                                  <option value="WV">
                                  WV
                                  </option>
                                  <option value="WI">
                                  WI
                                  </option>
                                  <option value="WY">
                                  WY
                                  </option>
                                  </select>
                                  </td>
                              </tr>
                              <tr>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <span id="formLabel_DaytimePhone" controlid="formElement_DaytimePhone">Daytime Phone:</span>
                                  </td>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <input id="formElement_DaytimePhone" name="Daytime Phone" labelid="formLabel_DaytimePhone" />
                                  </td>
                              </tr>
                              <tr>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <span id="formLabel_EveningPhone" controlid="formElement_EveningPhone">Evening Phone:</span>
                                  </td>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <input id="formElement_EveningPhone" name="Evening Phone" labelid="formLabel_EveningPhone" />
                                  </td>
                              </tr>
                              <tr>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <span id="formLabel_Email" controlid="formElement_Email">Email:</span>
                                  </td>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <input id="formElement_Email" name="Email" labelid="formLabel_Email" />
                                  </td>
                              </tr>
                              <tr>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <span id="formLabel_Comments" controlid="formElement_Comments">Comments:</span>
                                  </td>
                                  <td style="font-size: 8pt; text-align: left;">
                                  <textarea id="formElement_Comments" name="Comments" rows="4" cols="38" style="width: 100%;" labelid="formLabel_Comments">Enter comments here!
                                  </textarea>
                                  </td>
                              </tr>
                          </tbody>
                      </table>
                      <p>
                      <input type="submit" id="wstForm_Contact_Submit" value="Submit" onclick="return wstxSubmitForm(this);" /> <input type="reset" id="wstForm_Contact_Reset" value="Reset" />
                      </p>
                      </td>
                  </tr>
              </tbody>
          </table>
          <input type="hidden" id="FormMailerSubject" name="FormMailerSubject" value="Contact Form." /><input type="hidden" id="FormMailerRedirect" name="FormMailerRedirect" value="%wstx.project.BaseUrl%" />
      </form>