用户未验证验证码时无法生成错误响应

问题描述

一切正常，但是由于某些原因，当用户未检查ReCaptcha按钮时，我无法生成错误响应。 在用户确认他不是机器人之前，该表单不会发送。

我为Recaptcha构建了一个控制器，该控制器工作得很好，并且它生成的错误消息确实与我编写的错误消息一起传递到了前端。

您可以在下面的图像中看到，由ajax脚本生成的所有错误msg都非常好，并且'g-recptcha-response'得到了我在控制器中编写的错误，但不知何故该错误仅针对输入字段。

错误响应是由ajax脚本生成的，该脚本正在处理以下代码中的错误： （屁股，您可以看到我尝试使用现在带有注释的@if语句在文件中本地处理错误）

<form action="{{ route('register')}}" id="signupForm" class="form-default submit-by-ajax" method="POST" prefix="signup">
                    @csrf
                    {{method_field('POST')}}
                    <div class="form-group">
                        <input type="text" name="first_name" placeholder="{{ __('auth.First Name')}}" class="form-control signup-first_name" />
                    </div>
                    <div class="form-group">
                        <input type="text" name="last_name" placeholder="{{ __('auth.Last Name')}}" class="form-control signup-last_name" />
                    </div>
                    <div class="form-group">
                        <input type="text" name="email" placeholder="{{ __('auth.Email address')}}" class="form-control signup-email" />
                    </div>
                    <div class="form-group form-group-password">
                        <input type="password" name="password" placeholder="{{ __('auth.Password')}}" class="form-control signup-password" />
                        <img class="eye-password" src="{{asset('images/icon/eye.svg')}}" alt="" />
                    </div>
                    <div class="form-policy">
                        <label class="label-custom">
                            <input type="checkBox" required name="signup_agree">{{ __('auth.I agree to the')}}<a href="/page/terms-of-use">{{ __('auth.terms of service')}}</a>
                        </label>
                    </div>
                    <div class="form-group align-self start justify-content center">
                            <div class="g-recaptcha" data-sitekey="{{env('CAPTCHA_KEY')}}"></div>                   
                                <!--@if ($errors->has('g-recaptcha-response'))
                                        <span class="invalid-Feedback" role="alert">
                                            <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                        </span>
                                @endif -->
                
                    </div>
                    <div class="form-submit">
                        <button class="btn" type="submit">{{ __('auth.Sign Up')}}</button>
                    </div>
                    <div class="login-social text-center">
                        <p>{{ __('auth.or log in with:')}}</p>
                        <a href="{{route('login.socials','linkedin')}}"><img src="{{asset('images/icon/login-linkedin.svg')}}" alt="" /></a>
                        <a href="{{route('login.socials','google')}}"><img src="{{asset('images/icon/login-gmail.svg')}}" alt="" /></a>
                    </div>
                    <div class="form-question">{{ __('auth.Already have an account?')}} <a href="" class="trigger-popup" data-dismiss="modal" data-toggle="modal" data-target="#loginModal"><b>{{ __('auth.Login')}}</b></a></div>
                </form>

这是ajax.js文件的内容，该文件正在处理signup.blade.PHP文件中的错误

jQuery(function() {
    $("body").on("submit",".submit-by-ajax",function(e) {
        e.preventDefault();
        const $form = $(this);
        const action = $form.attr("action");
        const method = $form.attr("method")
            ? $form.attr("method")
            : $form.children("input[name=_method]").val();
        const data = $form.serialize();

        $.ajax({
            type: method,url: action,data,dataType: "json",beforeSend: function() {
                $form.find(":submit").attr("disabled","disabled");
                clearForm($form);
            },success: function(data) {
                responseData(data);
            },error: function(data) {
                addValidateError($form,data);
            }
        });
    });

    function clearForm($form) {
        $form.find(".form-control").each(function() {
            $(this).removeClass("is-invalid");
        });
        $form.find(".invalid-Feedback").each(function() {
            $(this).remove();
        });
    }
    function addValidateError($form,data) {
        $form.find(":submit").attr("disabled",false);
        const prefix = $form.attr("prefix");
        const { errors } = $.parseJSON(data.responseText);
        if (_.size(errors)) {
            _.forOwn(errors,(value,key) => {
                if(key == "g-recaptcha-response"){
                    //alert("Please Verigy that you are not a robot");
                    const CaptchaEle = $('.g-recaptcha');
                    const CaptchahtmlError = `<span class="invalid-Feedback" role="alert"><strong>${_.first(
                        value
                    )}</strong></span>`;
                    CaptchaEle.addClass("is-invalid");
                    CaptchaEle.after($(CaptchahtmlError));
                } else{
                    const inputEle = $(`.${prefix}-${key}`);
                    const htmlError = `<span class="invalid-Feedasdback" role="alert"><strong>${_.first(
                        value
                    )}</strong></span>`;
                    inputEle.addClass("is-invalid");
                    inputEle.after($(htmlError));
                }
                
                
                
            });
        }
    }

如果我要删除评论，则确实会在if(key == "g-recaptcha-response")中显示警报。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）