Question

帮助！

尝试在表单上设置Jquery验证，好吧，它忽略了我尝试添加的任何规则。

只有内联规则正常工作，例如type =“email”，需要e.t.c.

我尝试以多种方式添加验证：

function onloadCallback() {
    console.log("test");
    $("#hiddenRecaptcha").rules("add", {
        required: function() {
            console.log("grecaptcha.getResponce()");
            if(grecaptcha.getResponse() == '') {
                return true;
            }
            else{
                return false;
            }
        }
    });
};

没有任何内容记录到控制台，似乎没有调用'onloadCallback'函数。

我也有：

var validate2 = $("#contact-form").validate({
    rules: {
        email: {
            email: true,
            required: true,
            minlength: 20
        },
        hiddenRecaptcha: {
            required: function() {
                console.log("grecaptcha.getResponce()");
                if(grecaptcha.getResponse() == '') {
                    return true;
                }
                else{
                    return false;
                }
            }
        }
    },
    // fix-up placement of error label after first existing label
    errorPlacement: function(error, element) {
        console.log('I tried to validate');
        console.log(grecaptcha.getResponse());
        if (element.context.type == 'checkbox') {
            error.insertAfter(element.next('label'));
        } else {
            error.insertAfter(element);
        }
    },
    submitHandler: function(form){
        form.submit();
    }
});

现在，我知道这个位有效，因为错误放置正确地放入了日志'我试图验证'，但是，没有一个规则起作用。

控制台中没有出现任何类型的错误，它似乎完全跳过了所有规则设置。我无法看到为什么它会在代码中执行此操作，因为知道.validate函数正在正确运行。

即使检查了简单的规则，即使我将最小长度为20作为测试，也很高兴接受任何长度的电子邮件。

代码中没有任何设置可以忽略。

<div class="w-100">
<input type="text" name="title" id="title" value="Contact Form"  format="%D, %F %d, %Y - %g:%i:%s" size="50" maxlength="100" onkeyup="liveUrlTitle();" style="display: none;">
<!-- Form fields -->
<!-- Name input -->
 <div class="field">
                            <input name="name" placeholder="Your name" type="text" id="name" value="{name}"  required/>
                            <span class="entypo-user icon"></span>
                            <span class="slick-tip left">Enter your name</span>
                        </div>
                            <!-- Email input -->
                        <div class="field">
                            <input name="emailaddy" placeholder="Enter a valid email address" type="email" id="emailaddy" value="{emailaddy}"  required/>
                            <span class="entypo-mail icon"></span>
                            <span class="slick-tip left">Enter a valid email address</span>
                        </div>
                        <!-- Phone input -->
                        <div class="field">
                            <input name="phone" placeholder="Enter your phone number" type="tel" id="phone" value="{phone}"  required/>
                            <span class="entypo-mobile icon"></span>
                            <span class="slick-tip left">Add your phone number here</span>
                        </div>
                        <!-- Subject input -->

                        <!-- Message input -->
                        <div class="field">
                            <textarea name="message" placeholder="Message" id="message" class="message" value="{message}" required></textarea>
                            <span class="entypo-comment icon"></span>
                            <span class="slick-tip left">Add your message here</span>
                        </div>
                        <div class="field">
                            <div class="g-recaptcha" data-sitekey="6LegSgwTAAAAAEfyri8RGqxaqrP1G1IrBeBZ1JuC"></div>
                            <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
                        </div>
                        <!-- Send button -->
                        <input type="submit" value="Send" class="send" form="contact-form" name="send" />

表单标记被排除，因为它们是由框架生成的。

我制作了一个简单的版本，没有验证码，相同的代码 - recaptch divs。

    var validateContact = $("#contact-form").validate({
                rules: {
                    emailaddy: {
                        email: true,
                        minimumlength: 20,
                    },
                },
                onkeyup: false,
                onclick: false,
                ignore: "",
                // use debug if you don't want the form to be submitted
                // debug: true,
                submitHandler: function(form) {
                form.submit();
                }
        });

尽管如此，在email_address上没有设置最小长度，它很乐意接受任何有效的电子邮件，即使是test@test.com。

Answer 1

Doh，结果是框架工作的问题，为我重命名电子邮件地址字段。更改名称，id e.t.c.到emailaddy排序问题，所以摆脱 - 和_字符。

Jquery验证 - 没有影响的规则

1 个答案: