jQuery驗證 - 錯誤不顯示

-1

我想使用jQuery驗證插件，並顯示消息的問題。jQuery驗證 - 錯誤不顯示

該字段本身變成紅色，但消息無處可見。

我的HTML代碼：

<div class="dispTbl form-group"> 
     <div class="dispCell"> 
      <label>Send discount message within</label> 
      <div class="error" id="offerError"></div> 
     </div> 
     <div class="dispCell" style="vertical-align:middle;line-height:20px"> 
      <div class="InputAddOn"> 
       <button class="InputAddOn-item" data-action="decrease" data-field="offerDays"><i class="fa fa-arrow-circle-down"></i></button> 
       <input type="text" name="settings__discount_message_offer_days" id="offerDays" class="days" style="width: 46px" value="<?= $settings__discount_message_offer_days; ?>"> 
       <button class="InputAddOn-item" data-action="increase" data-field="offerDays"><i class="fa fa-arrow-circle-up"></i></button> 
      </div> 
     </div>

我jQuery代碼：

var validator = $("#settingsForm").bind("invalid-form.validate", function() { 
    $("#errors").html("Your form contains " + validator.numberOfInvalids() + " errors, see details below."); 
    }).validate({ 
      debug: true, 
      errorElement: "div", 
      errorContainer: $("#warning, #summary"), 
      errorPlacement: function(error, element) { 
       if(element.attr("class") == "days") 
        error.appendTo($('#offerError')); 
      }, 
      success: function(label) { 
        label.text("ok!").addClass("success"); 
      }, 
      rules: { 
       settings__discount_message_offer_days: { 
        smaller: $('#discApplicableDays').val(), 
        number: true 
       } 
      }, 
      messages: { 
       settings__discount_message_offer_days: { 
        number: 'Please enter a numeric value' 
       } 
      } 
    });

越小方法：

$.validator.addMethod('smaller',function(value, element, param) { 
    return value <= param; 
}, 'These number of days cannot be bigger than the Discount applicable if paid within number of days');

方法得到的值是：值：1個 PARAM ：0

爲什麼錯誤的div保持爲空？

來源

2016-03-11 Sigal Zahavi

好的，出於某種原因，錯誤突然顯示，但現在我有一個不同的問題。它總是顯示'較小'的消息，而不是數字消息。如果我在字段中加入'a'，我會從較小的方法中得到錯誤。這是爲什麼？ –

你所發佈的代碼根本不起作用...... HTML甚至不包含'form'標籤，'submit'按鈕或'＃errors'和'＃discApplicableDays'元素。請包含足夠的代碼以正確重現問題。 – Sparky

-1

使用showErrors選項來實現這一點：

showErrors: function(errorMap, errorList) { 
$(".errormsg").html($.map(errorList, function (el) { 
    return el.message; 
}).join(", ")); 
},

例如：http://jsfiddle.net/bd3zM/

來源

2016-03-11 10:01:58

謝謝，但這不是我想要做的。我想在它所屬的字段旁邊顯示每個錯誤，而不是將所有錯誤列表放在一起。 –

你不恰當地使用各種選項，而不告訴我們，這正是應該如何表現。你也忽略了包含足夠的代碼來重現問題。沒有<form>，submit按鈕，並且沒有#errors和#discApplicableDays元素。

此外，這些也是問題。

你必須the errorContainer option設置爲$("#warning, #summary")，並有在你的代碼中沒有這樣的容器。此外，該選項預計還會設置errorLabelContainer。
你有errorElement設置爲div，這很好。但是，在errorPlacement中，您正在嘗試檢查某個元素，並強制將該錯誤消息附加到您手動創建的另一個div。這是如此沒有必要。如果允許插件在默認情況下運行，您可以使用簡單的jQuery DOM操作將div放置到任何位置，而無需手動創建或動態追加任何內容。
在errorPlacement中，您有if (element.attr("class") == "days")。但是，當出現錯誤時，插件會動態應用錯誤類別，因此"days error"不會與"days"匹配，因此您的條件將始終失敗。使用jQuery .hasClass()，它返回一個布爾值，用於檢查days類。但是，正如上面＃2所述，我認爲這種方法應該放棄一些更通用的方法。

來源

2016-03-11 16:27:55 Sparky

謝謝。回答您的意見： –

謝謝，回答謝謝。 This help： element.hasClass（'days'） –

@SigalZahavi，不客氣。請接受我的答案，通過點擊綠色複選標記，因爲項目＃3解決了您的根本問題。謝謝。 – Sparky

jQuery驗證 - 錯誤不顯示

回答

相關問題