2 Replies Latest reply on Jul 29, 2017 1:15 PM by Kornicki Slawomir

    Form Custom Fields Validation (Checkboxes and Radio Buttons)

    3347806

      Hi

       

      I need my custom form fields to be required. Contacts can choose between 4 options and have to select 2. How do I code this? I have checked all the other tips and none of them helped me.

       

      For a single checkbox I have added the following code: It worked perfect.

       

      <!-- Load jQuery 1.12.4.min.js -->

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">

      </script>

      <!-- Make Checkboxes Required on Eloqua Forms -->

      <script type="text/javascript">

        $(document).ready(function() {

          // DOM Ready

          var dom4 = document.querySelector("#form273 input[type='checkbox']");

          var field4 = new LiveValidation(dom4, {

            validMessage: "", onlyOnBlur: false, wait: 300}

                                         );

          field4.add(Validate.Acceptance, {

            failureMessage:"This field is required"}

                    );

        }

                         );

        // End DOM

      </script>

       

       

      What is the code for mutliple checkboxes (4 options, 2 have to be picked)? Where do I have to place it in my HTML page??

       

      Thank you so much for your help.

        • 1. Re: Form Custom Fields Validation (Checkboxes and Radio Buttons)
          3053533

          Hi Newbie,

           

          Here is your solution for custom fields, you can call a function from submit button.

           

          <!DOCTYPE html>

          <html>

          <head>

              <!-- StartFormCustomCSS -->

             

              <script>

                  function myfunction() {

                      if (document.getElementById('field0').value == '') {

                          alert("Please enter email address");

                      }

           

                      if (document.getElementById('field1').value=='') {

                          alert("Please select Role");

                      }

                     

                      if (document.getElementById('gender_Male').checked) {

                          alert("male");

                      } else if (document.getElementById('gender_Female').checked) {

                          alert("female");

                      }

                      else {

                          alert("Select Gender");

                      }

                  }

           

              </script>

              <!-- EndFormCustomCSS -->

          </head>

          <body>

              <div elqid="2428" elqtype="UserForm">

                  <form method="post" name="UntitledForm-1485955178807" action="https://s1687.t.eloqua.com/e/f2" onsubmit="setTimeout(function(){if(document.querySelector){var s=document.querySelector('form#form2428 input[type=submit]');if(s){s.disabled=true;}}},100);return true;" id="form2428" class="elq-form" title="Form - test2017-Vinay">

                      <input value="UntitledForm-1485955178807" name="elqFormName"  type="hidden" id="form2428">

                      <input value="1687" name="elqSiteId"  type="hidden">

                      <input name="elqCampaignId"  type="hidden">

                      <div id="formElement0" class="sc-view form-design-field sc-static-layout item-padding sc-regular-size">

                          <div class="field-wrapper"></div>

                          <div class="individual field-wrapper">

                              <div class="_100 field-style">

                                  <p class="field-p">

                                      <label for="field0" class="label-position top ">Email Address<span class="required">*</span></label><input id="field0" name="emailAddress" value="" class="field-size-top-large"  type="text"></p>

                              </div>

                          </div>

                      </div>

                      <div id="formElement1" class="sc-view form-design-field sc-static-layout item-padding sc-regular-size">

                          <div class="field-wrapper"></div>

                          <div class="individual field-wrapper">

                              <div class="_100 field-style">

                                  <p class="field-p">

                                      <label for="field1" class="label-position top ">Job Role<span class="required">*</span></label>

                                      <select id="field1" name="jobRole1" class="field-size-top-large" >

                                          <option value="" selected>Select...</option>

                                          <option value="Executive">Executive</option>

                                          <option value="Manager - Sr. Manager">Manager - Sr. Manager</option>

                                          <option value="Senior Executive">Senior Executive</option>

                                          <option value="Project Manager">Project Manager</option>

                                          <option value="Researcher">Researcher</option>

                                          <option value="Developer">Developer</option>

                                      </select></p>

                              </div>

                          </div>

                      </div>

                      <div id="formElement2" class="sc-view form-design-field sc-static-layout item-padding sc-regular-size">

                          <div class="field-wrapper"></div>

                          <div class="individual field-wrapper">

                              <div class="_100 field-style">

                                  <p class="field-p">

                                      <label for="field2" class="label-position top ">Gender<span class="required">*</span></label>

                                      <input type="radio" name="gender" id="gender_Male" value="Male" /><br />

                                      <input type="radio" name="gender" id="gender_Female" value="Female" /><br />                           

                                  </p>

                              </div>

                          </div>

                      </div>

                      <div id="formElement3" class="sc-view form-design-field sc-static-layout item-padding sc-regular-size">

                          <div class="field-wrapper"></div>

                          <div class="individual field-wrapper">

                              <div class="_100 field-style">

                                  <p class="field-p">

                                      <input value="Submit" class="submit-button" style="font-size: 100%; height: 24px; width: 100px"  type="button" onclick="myfunction()"></p>

                              </div>

                          </div>

                      </div>

                  </form>

                  <style type="text/css" media="screen">

                      .LV_validation_message {

                          font-weight: bold;

                          margin: 0 0 0 5px;

                      }

                      .LV_valid {

                          color: #00CC00;

                          display: none;

                      }

           

                      .LV_invalid {

                          color: #CC0000;

                          font-size: 10px;

                      }

           

                      .LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active, textarea.LV_valid_field:hover, textarea.LV_valid_field:active {

                          outline: 1px solid #00CC00;

                      }

           

                      .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active {

                          outline: 1px solid #CC0000;

                      }

                  </style>

                  <script src="https://img.en25.com/i/livevalidation_standalone.compressed.js" type="text/javascript" >

            </script>

            <style type="text/css" media="screen" >

              .LV_validation_message{

                font-weight:bold;

                margin: 0 0 0 5px;

              }

              .LV_valid{

                color:#00CC00;

                display:none;

              }

              .LV_invalid{

                color:#CC0000;

                font-size:10px;

              }

              </style>

           

              </div>

          </body>

           

          </html>

           

           

          Thanks

          Vinay Kasera