輸入類型的jQuery表單驗證

Question

我目前有一個動態變化的表格。 我正在使用所有文本輸入，但是它們都只能接受數字。

    $("#result-form").validate({
            rules: {
                .text: {
                required: true,
                digits: true
                }
            },
            messages: {
                .text:{
                required: " Please enter a score!",
                digits: " Please only enter numbers!"
                }
            },
            submitHandler: function(form) {
                form.submit();
            }
        });

目前，我嘗試使用上述方法進行驗證，但無法正常工作。 有任何想法嗎？

Answer 1

你不能這樣做...

$("#result-form").validate({
    rules: {
        .text: {  // <-- MUST only be a NAME attribute
            required: true,
            digits: true
        }
    },
    ....

使用.validate()方法聲明規則時，只能使用name屬性聲明它們。

---

如果要動態創建表單元素，則只能使用.rules('add')方法來更改或應用規則。 創建新元素后，您將立即調用此方法，並且可以使用所需的任何jQuery選擇器作為目標。

這段代碼會將這些規則動態地應用於頁面上的所有type="text"字段。

$("#result-form").validate({  // initialize plugin
    // other rules and options
});

$('input[type="text"]').each(function() {
    $(this).rules('add', {
        required: true,
        digits: true,
        messages: {
            required: " Please enter a score!",
            digits: " Please only enter numbers!"
        }
    });
});

工作演示： http ： //jsfiddle.net/2U68C/

注意事項 ：

• 如果選擇器可能包含多個元素，則必須將.rules()包裝在jQuery .each 。 如果您不這樣做，則僅第一個匹配的元素將被驗證。

• 您必須確保考慮進行驗證的所有表單輸入元素都包含唯一的 name屬性。 這是插件跟蹤輸入的方式。 如果您不這樣做，則僅第一個匹配的元素將被驗證。

---

旁注 ：

你根本不需要這個...

submitHandler: function(form) {
    form.submit();
} 

這已經是默認行為。 實際上， form.submit()與插件內部的代碼相同。 換句話說，在這種情況下，您無需調用submitHandler 。 僅在需要覆蓋或擴充時（例如使用ajax() ，才需要使用它。

Answer 2

如果要補充@Spark的答案，

$('input[type="text"]').on('keyup', function(e) {
    $(e.target).valid();
});

您可以動態驗證（在第一次時，輸入僅在您單擊后才會驗證，或集中在其他元素上）

Answer 3

使用name代替class 。

rules: {
   nameoftextbox: {
        required: true,
        digits: true
    }
}

要將其與類一起使用：

jQuery.validator.addClassRules("classname", {
  required: true,
  digits: true
});

Answer 4

您可以在輸入標簽中添加“必需數字”屬性，然后執行以下操作：

var validator = $( "#result-form" ).validate();
validator.form();

這也將允許您專門選擇需要哪些文本框。 為了進一步閱讀，我建議您閱讀http://jqueryvalidation.org/documentation/