Jquery 验证 - 需要至少 2 个字段中的 1 个填充默认文本以外的任何内容

Jquery validate - needing at least 1 of 2 fields populated with anything other than default text

本文关键字:填充 默认 任何内 文本 字段 验证 Jquery      更新时间:2023-09-26

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

尝试使用 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."));

演示:小提琴

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