如何簡化我的代碼？

UPDATE： 這是我可怕的jQuery代碼：JSFiddle 如何簡化我的代碼？

注：只有「接觸」按鈕包含一個真實的形式。

我想簡化我的代碼。

我有兩種形式，但一個可以同時顯示一個：form_devis和form_request。

如何寫：如果form_request是可見的，那它的每個字段都需要類，而且不是空的，所以這樣做{}。先謝謝你。

.error-image {background: #c3c6c7 url(../images/erreur-form.png) no-repeat 98% center;} 

$btnValidate.click(function() { 
    valid = true; 

    if ($('#form_request').is(':visible')) { 

     $('#form_request').find('.required').each(function() { 
      if($(this).val() == "" || $(this).val() == " ") { 
       $(this).addClass("error-image"); 
       $ErrMessGen.fadeIn(500); 
       valid = false; 
      } 
      else { 
       $(this).removeClass("error-image"); 
      } 

      $(this).keyup(function() { 
       if(!$(this).val() == '') { 
       $(this).removeClass("error-image"); 
       }   
      }); 

      $(this).focusout(function() { 
       if($(this).val() == '') { 
       $(this).addClass("error-image"); 
       }   
      }); 
     }); 

    } 

    return valid; 

});

來源

2013-12-21 Xroad

'如果（！$（本）.VAL（）== ''）'是錯誤的，因爲'！'比''==更高的優先級。它應該是'if（this.value）{...}' –

您不應該在'.each（）'函數中綁定事件處理程序。 – Ohgodwhy

，以提高你的代碼是使用JQuery驗證插件最簡單的方法，它會處理空字符串檢查等，爲您和具有內置的郵件檢查等

http://jqueryvalidation.org/

來源

2013-12-21 20:35:48

我想你必須在代碼中添加以下默認阻止表單提交：

$('#btnValidate').click(function(e) { 
    e.preventDefault(); 
....... 
});

每一件事其他人似乎在你的代碼工作

你也可以通過簡單地更換!$(this).val()和$(this).val()==''也可以使用 $.trim從開始和結束字符串刪除空白。

來源

2013-12-21 20:41:07

我評論了您的代碼的所有編輯。我認爲這是你可以從中獲得的一切。

正如Ohgodwhy說，事件處理程序不應該在each，因爲你一次創建（內存使用量）X事件處理單一選擇，而不是一個事件處理程序的所有選擇使用。

已更新我的代碼，並得到它的工作。

$btnValidate.click(function() { 
    valid = true; 
    var $formRequest = $('#form_request'); // local variable to find ID only once 
    var $req = $formRequest.find('.required'); 
    if ($formRequest.is(':visible')) { 
    $req 
    .each(function() { 
     if(! $.trim($(this).val().length)) { // trim value to get only one IF and use length instead of value&type comparison 
      $(this).addClass("error-image"); 
      valid = false; 
     } else { 
      $(this).removeClass("error-image"); 
     } 
    }) 
    .bind({ // alternative method of writing events from about jQuery 1.7. 
     keyup: function(){ 
      ($(this).val().length) && $(this).removeClass("error-image"); // Javascript hack for IFs without ELSEs 
     }, 
     blur: function(){ 
      (! $(this).val().length) && $(this).addClass("error-image"); 
     } 
    }); 
    } 
});

來源

2013-12-21 20:51:14 avall

謝謝！我更新了我的問題。我試過你的代碼，但我無法使它工作。我對jQuery不好。可能是因爲我忘記了「返回有效」;在我的代碼中。我更新了它。 – Xroad

繼承人通過快速和骯髒的企圖

我分隔從每個循環completey的binings，因爲我覺得它更有意義

$btnValidate.click(function() { 
    valid = true; 
    $('#form_request:visible').find('.required').each(function() { 
     if(!$(this).val().trim()) { 
      $(this).addClass("error-image"); 
      valid = false; 
     } 
     else { 
      $(this).removeClass("error-image"); 
     } 
    }); 
}); 
$('.required').keyup(function() { 
    if($(this).val().trim()) { 
     $(this).removeClass("error-image"); 
     }   
    }).focusout(function() { 
    if(!$(this).val().trim()) { 
    $(this).addClass("error-image"); 
    }   
});

和更新

來源

2013-12-21 21:11:11

謝謝！我更新了我的問題，因爲在您的代碼中，表單總是經過驗證。 – Xroad

更新： jsfiddle上的原始示例現在已修復並正常工作：http://jsfiddle.net/akhikhl/EYV2k/

下面是解：

function validateFormInput(elem) { 
    var validElem = !$(elem).hasClass('required') || $(elem).val().trim() != '' 
    $(elem).toggleClass("error-image", !validElem); 
    if(!validElem) 
    $ErrMessGen.fadeIn(500); 
    return validElem; 
} 

function validateForm() { 
    var formValid = true; 
    $('div.panel:visible input').each(function() {    
     if(!validateFormInput(this)) 
      formValid = false; 
    }); 
    if(formValid) 
     $ErrMessGen.hide(); 
    return formValid; 
} 

$("div.panel input").on("keyup focusout", validateForm); 

$btnValCt.on(Modernizr.touch ? 'tap' : 'click', validateForm);

說明：

validateFormInput檢查有效性單個輸入元件。
validateForm檢查窗體
支票「必需的」類移動到validateFormInput上的所有文本輸入元件，因爲它緊密地與被檢查的規則（可能還有其他的規則和其他類耦合，所有他們應該成爲validateFormInput的實現細節）。
toggleClass簡化了代碼，因此不需要分別調用addClass和removeClass。
兩個div「form-demande」和「form-devis」與class =「panel」一起提供以簡化代碼。

來源

2013-12-21 21:12:33 akhikhl

你忘了'有效'變量 – Grundy

感謝您的仔細閱讀。我介紹了變量formValid，並在jsfiddle中更新了示例。 – akhikhl

非常感謝您的解釋！我用JSFiddle鏈接更新了我的問題。實際上，我使用modernizr +錘子作爲觸摸設備，並且遇到$（'＃btnValidate'）的問題。click（validateForm）;現在。 – Xroad

又一變

$btnValidate.click(function() { 
    valid = true; 
    $('#form_request:visible .required').each(function() { 
     var $this = $(this); 
     valid = $this.val().trim(); 
     $this.togleClass("error-image", !valid); 
    } 
} 

$('#form_request').on("keyup focusout",".required",function(){ 
    var $this = $(this); 
    $this.toggleClass("error-image", !$this.val().trim()); 
});

來源

2013-12-21 21:41:23 Grundy

如何簡化我的代碼？

回答

相關問題