響應式jquery驗證問題

我構建了一個響應式表單，並使用CSS媒體查詢來根據屏幕寬度更新佈局。響應式jquery驗證問題

在桌面視圖和移動&平板電腦視圖之間，表單的設計更改爲：標籤元素位於桌面寬度的輸入字段頂部，但隨後在屏幕縮小爲移動時成爲默認輸入字段值寬度。

我運行下面的函數放在標籤文本輸入字段的值： 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()); 
}); 
}

這與我的客戶端驗證嚴重破壞的領域正在測試空虛，他們變得完整和錯誤的默認值。除其他事項外空字段或默認值（如「選擇」，「名」，等等）驗證檢查

$('.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');

有沒有人對如何處理這有什麼建議？

來源

2013-02-19 timmackay

首先，請顯示錶格的HTML。其次，請構建一個jsFiddle演示。 – Sparky 2013-02-19 21:28:30

我一直在試圖寫一個小提琴，但不能真正把它的工作 - 我認爲這可能太複雜，這就是爲什麼我無法弄清楚它的方式。上面添加的HTML。感謝您的輸入。 – timmackay 2013-02-19 22:33:43

不需要jsFiddle，因爲這裏的問題不是關於JS中的錯誤，而是關於解決問題的方法。這就是爲什麼喬希能夠在沒有工作演示的情況下提出解決方案的原因。 – gpr 2013-02-19 22:51:37

所以基本上你希望該字段被視爲「空」，如果它具有默認值並且尚未被用戶編輯。

首先，您可以使用placeholder屬性而不是設置val。現在是supported by most of the mobile browsers，不應該對你的驗證刷新。對於不支持的情況 - 如果你要去這條路線，確保你只做這個in browsers where it's not supported - 你可以跟蹤哪些字段已被編輯。在執行驗證時，如果某個字段已編輯並且是默認值，那麼這是一個錯誤。否則，你可以認爲它是空的。

只想說，我認爲驗證（'沒有默認值'）是不必要的，特別是因爲您正在談論移動設備，執行此邏輯的額外成本可能不值得。

來源

2013-02-19 21:33:50

謝謝喬希。你在說什麼時「在執行驗證時，如果一個字段已經被編輯並且是默認值，那麼這是一個錯誤，否則你可以認爲它是空的。」我應該嘗試檢查「更改」事件嗎？ – timmackay 2013-02-19 21:37:55

是的 - 基本上，當一個值被改變時，只需要將這些信息保存在某個對象中，比如'fieldChanges [fieldName] .changed = true'。然後，當需要驗證的時候，如果'fieldChanges [fieldName] .changed == true && fieldName.val == defaultVal'，你知道這是一個錯誤。 – 2013-02-19 21:54:26

謝謝喬希，我會放棄這一點。乾杯。 – timmackay 2013-02-19 22:35:42

響應式jquery驗證問題

回答

相關問題