отзывчивая проблема проверки jquery

Question

Я создаю отзывчивую форму и используя запросы css media для обновления макета на основе ширины экрана.

Между видом на рабочий стол и мобильным телефоном & вид на планшет, дизайн для формы изменяется тем, что элементы ярлыка располагаются на поля ввода в ширину рабочего стола, а затем становятся значениями полей ввода по умолчанию, когда экран сводится к мобильному ширина.

Я бег следующей функции, чтобы поместить текст в этикетках в качестве значения полого ввода: HTML:

<div class="sectionHeader" id="updateDetails">My details <span class="sectionEdit">Edit</span></div> 
     <div class="sectionWrapper" id="myDetails"> 
      <div class="formSection clearfix"> 
       <fieldset> 
        <legend>Personal</legend> 
         <div class="ctrlHolder"> 
          <div class="ctrlHolder"> 
           <label class="hiddenLabel" for="givenName">Given name</label> 
           <input name="givenName" id="givenName" type="text" class="text long required"/> 
          </div> 
          <div class="ctrlHolder"> 
           <label class="hiddenLabel" for="familyName">Family name</label> 
           <input name="familyName" id="familyName" type="text" class="text long required"/> 
          </div> 
         </div> 
       </fieldset> 
      </div> 
     </div> 
<div class="formSectionFooter clearfix"> 
    <input data-target="myInvestment" class="sectionNavigator button secondary" id="sectionDetailsNext" name="sectionDetailsNext" type="button" value="Continue"/> 
      </div> 


$('#details .formSection fieldset .ctrlHolder label').each(function(){ 
    //console.log($(this).text()); 
    $(this).addClass('hiddenLabel'); 
    $(this).next('input').val($(this).text()); 
}); 
} 

Это играет опустошение с моей проверкой на стороне клиента, как поля проходят тестирование на пустоты, и они становятся полными и ошибочными по значениям по умолчанию. Среди прочего, проверки достоверности для пустых полей или значений по умолчанию (например, «Select», «имя», и т.д.)

$('.sectionNavigator').click(function(event){ 
    //$(this).closest('.formSection').validate(); 
    validateMy.form(); 
    event.preventDefault(); 

    // check for any empty fields in the preceding section 
var $thisFormSection = $(this).closest('.formSection'); 
var $elementsWithErros = $thisFormSection.find('input[value=""]:visible, input[class="error"]:visible, select[value="Day"]:visible, select[value="Month"]:visible, select[value="Year"]:visible, select[value="Select"]:visible, select[value="Please select"]:visible, select[value="Given name"]:visible, select[value="Family name"]:visible'); 
var target = $(this).attr('data-target'); 

Кто-нибудь есть какие-либо советы о том, как подойти к этому?

Answer 1

Так что вы хотите, чтобы поле считалось «пустым», если оно имеет значение по умолчанию и не редактировалось пользователем.

Во-первых, вы можете использовать атрибут placeholder вместо установки val. Теперь это supported by most of the mobile browsers и не следует расчитывать на вашу проверку. Для случаев, когда он не поддерживается, и если вы собираетесь идти по этому маршруту, убедитесь, что вы это делаете только in browsers where it's not supported - вы можете отслеживать, какие поля были отредактированы. При выполнении вашей проверки, если поле имеет, было изменено и является значением по умолчанию, то это ошибка. В противном случае вы можете просто предположить, что он пуст.

Просто хочу сказать, я считаю, что валидация («нет значений по умолчанию») не нужна, тем более, что вы говорите о мобильных устройствах, а дополнительные затраты на выполнение этой логики, вероятно, просто не стоят того.