jQuery驗證-需要至少2個字段中的1個字段填充默認文本以外的任何內容

Question

我有一個HTML聯系人表單，該表單在每個字段中都有默認值-即。 “名字”（其中我使用clearfield.js，以便當用戶單擊時值消失）

我有2場，其必須填寫，並且2場，其中的任一者必須填寫。當然，所有領域都已經確認為被填寫為他們都有默認值。 我通過使用validator.addMethod來忽略默認短語來解決此問題。

我還設法調整了驗證，以允許使用validator.addMethod填寫2個字段中的至少1個，但是僅當我取出默認值時才可以。

當我有默認值並且希望填寫2個字段中的至少1個時，就會出現我的問題。我無法弄清楚如何/如果至少一個字段具有唯一的非默認值，則可以識別驗證。

我在下面包含了我的代碼。

我不是jquery / javascript的專家，所以希望那里有一個簡單的解決方案。

<script type="text/javascript"> 
    $(document).ready(function() {

        jQuery.validator.addMethod("notEqual", function(value, element, param) {
          return this.optional(element) || value != param;
        }, "This field is required.");

        jQuery.validator.addMethod("require_from_group", function (value, element, options) {
            var numberRequired = options[0];
            var selector = options[1];
            var fields = $(selector, element.form);
            var filled_fields = fields.filter(function () {
                return $(this).val() != "";

            });
            var empty_fields = fields.not(filled_fields);
            if (filled_fields.length < numberRequired && empty_fields[0] == element) {
                return false;
            }
            return true;
        }, jQuery.format("Please enter either a phone number or email address."));


      $("#contact-form").validate({
        groups: {
            names: "phone email"
        },         
        rules: {
          fname: {
            required: true,
            notEqual: "First name*"
            }, 
          lname: {
            required: true,
            notEqual: "Last name*"
            },
          phone: {
            require_from_group: [1, ".phoneEmail"]
            },
          email: {
            require_from_group: [1, ".phoneEmail"]
            },
        }

        });

    });

    jQuery.extend(jQuery.validator.messages, {
        require_from_group: jQuery.format("'Please enter either username/ email address to recover password'/Please fill out at least {0} of these fields.")
    });

<form id="contact-form" method="post" action="contact-submitted.php" >          
        <input type="text" class="clearField" name="fname" id="fnameField" value="First name*" />
        <input type="text" class="clearField" name="lname" id="lnameField" value="Last name*" />
        <input type="text" class="hidden" name="subject" id="subjectField" />
        <input type="text" class="clearField phoneEmail" name="phone" id="phoneField" value="Phone number*" />
        <input type="text" class="clearField phoneEmail" name="email" id="emailField" value="Email" />
        <textarea name="message" class="clearField" id="messageField">Your message</textarea>
        <span class="required-field">*required field</span>
        <input type="submit" id="contact-submit" value="Start planning now" />
    </form>

Answer 1

嘗試使用decaultValue屬性

jQuery.validator.addMethod("require_from_group", function (value, element, options) {
    var numberRequired = options[0];
    var selector = options[1];
    var fields = $(selector, element.form);

    var filled_fields = fields.filter(function () {
        return $(this).val() != this.defaultValue;
    });
    if (filled_fields.length < numberRequired && filled_fields.index(element) == -1) {
        return false;
    }
    return true;
}, jQuery.format("Please enter either a phone number or email address."));

演示： 小提琴

Answer 2

為了檢查電子郵件或電話號碼的唯一性，您需要在填寫該字段后立即進行Ajax呼叫。