0

我有一个 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>
4

2 回答 2

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."));

演示：小提琴

于 2013-09-18T02:35:45.577 回答
0

为了检查电子邮件或电话号码的唯一性，您需要在填写该字段后立即进行 Ajax 调用。

于 2013-09-18T02:41:05.903 回答