如何做到這一點與jquery而不是javascript

-2

我一直在試圖將這部分腳本轉換爲jQuery而不是香草javascript，但我不知道如何通過jQuery元素循環。基本上，我從每個字段獲取數據attr值，將其用作顯示在字段附近的錯誤消息。這是所有提交按鈕上的點擊事件，FYI如何做到這一點與jquery而不是javascript

什麼是jQuery方式？

//Set some variables 
     var invalidFields = $(form).querySelectorAll(':invalid'), 
     errorMessages = $(form).querySelectorAll('.error-message'), 
     parent; 

     // Remove any existing messages 
     for (var i = 0; i < errorMessages.length; i++) { 
      errorMessages[i].parentNode.removeChild(errorMessages[i]); 
     } 

     //Get custom messages from HTML data attribute for each invalid field 
     var fields = form.querySelectorAll('.sdForm-input'); 
     for (var i = 0; i < fields.length; i++) { 
      var message = $(fields[i]).attr('data-ErrorMessage'); 
      $(fields[i]).get(0).setCustomValidity(message); 
     } 

     //Display custom messages 
     for (var i = 0; i < invalidFields.length; i++) { 
      parent = invalidFields[i].parentNode; 
      parent.insertAdjacentHTML('beforeend', '<div class='error-message'>' + 
       invalidFields[i].validationMessage + 
       "</div>"); 
     }

來源

2016-07-22 Eckstein

瀏覽jQuery文檔：http://api.jquery.com/jquery.each/ –

我轉換你的代碼一到一個jQuery的。但可能有其他方式，當我知道form,setCustomValidity和validationMessage來自何處時。

var $form = $(form); 

// Remove any existing messages 
$(".error-message", $form).remove(); 

// Get custom messages from HTML data attribute for each invalid field 
$(".sdForm-input", $form).each(function() { 
    var message = $(this).attr('data-ErrorMessage'); 

    // i don't know where the 'setCustomValidity' function is coming from 
    // this is a custom function 
    $(this)[0].setCustomValidity(message); 
}); 

// Display custom messages 
$(":invalid", $form).each(function() { 
    // i don't know where 'validationMessage' is comig from 
    // this is a custom property 
    $(this).parent().append("<div class='error-message'>" + $(this)[0].validationMessage + "</div>"); 
});

來源

2016-07-22 21:47:09 eisbehr

謝謝。僅供參考：https：//html.spec.whatwg.org/multipage/forms.html#dom-cva-setcustomvalidity – Eckstein

哦，我真的不知道。也謝謝你！ – eisbehr

您可以簡單地將其替換。

var fields = form.querySelectorAll('.sdForm-input'); 
for (var i = 0; i < fields.length; i++) { 
    var message = $(fields[i]).attr('data-ErrorMessage'); 
    $(fields[i]).get(0).setCustomValidity(message); 
}

替換使用jQuery的方式

var fields = form.find('.sdForm-input'); 
$.each(fields, function(index, el){ 
    var message = $(el).attr('data-ErrorMessage'); 
    $(el).setCustomValidity(message); 
});

來源

2016-07-22 21:38:22 nniicc

如何做到這一點與jquery而不是javascript

回答

相關問題