Link to home
Start Free TrialLog in
Avatar of dlearman1
dlearman1Flag for United States of America

asked on

What is the correct setup for a Bootstrap 3 Form, phone input?

I have the following setup for a Bootstrap 3 contact form:

 <form name="contactForm" class="contactForm form-responsive" method="post" action="http://www.serenaconstruction.com/sendForm-contact.php" role="form">

      <div class="form-group">
             <div class="col-md-10">
                    <label class="sr-only" for="InputName">Name</label>
                    <input type="text" class="form-control input-sm" name="InputName" id="InputName" placeholder="name:" required>
              </div>
        </div>

         <div class="form-group">
                 <div class="col-md-10">
                           <label class="sr-only"  for="InputEmail">Email</label>
                           <input type="email" class="form-control input-sm" id="InputEmail" name="InputEmail" placeholder="email:" required  >
                  </div>
          </div>

          <div class="form-group">
                  <div class="col-md-10">
                            <label class="sr-only" for="inputPhone">Phone</label>
                            <input type="text" class="form-control bfh-phone input-sm" data-format="+1 (ddd) ddd-dddd"  id="InputPhone" name="InputPhone" placeholder="phone:" >
                   </div>
            </div>

             <div class="col-md-10">
                     <select id="box1" name="contactCombobox" class="combobox form-control" onChange="go()">
                              <option value="" disabled selected>What are you interested in?</option>
                              <option value="#">Summerstone</option>
                              <option value="#">Artessa</option>
                               <option value="#">Houghton Custom Home</option>
                               <option value="#">Lower Somerset Custom Home</option>
                          </select>
                    </div>

                     <div class="form-group">
                               <div class="col-md-10">
                                         <label class="sr-only" for="InputMessage">How can we help you?</label>
                                          <textarea name="InputMessage" id="InputMessage" class="form-control" placeholder=" How can we help you?" rows="75"></textarea>
                               </div>
                        </div>

                        <div id="send" class="col-md-12 text-center">
                                 <button id="contactButton" type="submit" class="btn btn-default">SEND</button>
                         </div>
                 </form>

This form returns the following validation error on the inputPhone:

          "Line 265, Column 93: The for attribute of the label element must refer to a form control.
             …                           <label class="sr-only" for="bfh-phone">Phone</label>

I don't understand what correction is wanted here.  Some sage advice would be greatly appreciated.
Avatar of Rob
Rob
Flag of Australia image

<label class="sr-only" for="bfh-phone">Phone</label>

The for attribute needs to point to the id of an element not the class.  However I cannot see that element in the code you've pasted above so it would be in another section of your code.
Avatar of dlearman1

ASKER

Hi Bob,

I goofed up on the error message. The actual message is:

           <label class="sr-only" for="inputPhone">Phone</label>

The code above seems to show;  id="InputPhone" correctly, but I still get the error message.  I must be missing something. Thanks a lot for your help.

Best,
Doug
ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial