未捕获的TypeError：FormNapper需要HTMLFormElement元素或id字符串之一 [英] Uncaught TypeError: FormNapper requires an HTMLFormElement element or the id string of one

问题描述

我有一个无法正常使用的表单，因为我试图使其准备就绪以便创建信用卡信息的自定义表单。

I'm having a form that is simply not working as I try to make it ready for braintree in order to create a custom form for credit card information.

但是，如果我在UiBinder中创建此表单，则：

However, if I'm creating this form in the UiBinder:

<g:HTML ui:field="creditCardFormContainer">             
    <form id="credit-card-form" name="credit-card-form" action="/app/create-credit-card" method="post" target="hidden-iframe">

        <label for="card-number">Card Number</label>
        <div id="card-number"/>

        <label for="cvv">CVV</label>
        <div id="cvv"/>

        <label for="expiration-date">Expiration Date</label>
        <div id="expiration-date"/>

        <input id="nonce" name="nonce" type="hidden" value="" />
        <input type="submit" value="Add credit card" />            
    </form>
</g:HTML>

并进行信用卡格式我实际上看到的是不是我期望的类型：

and make a check of the type credit-card-form I'm actually seeing that it isn't the type I'm expecting it to be:

private native void setupCreditCardForm(String domId, String serverToken) /**/-{

    var form = $doc.getElementById(domId);

    if (form instanceof HTMLFormElement != true) {
        console.log(typeof(form)); // Prints 'object'
        throw new TypeError("Form must be of type HTMLFormElement"); // Gets thrown ..
    }

    // Never reached ..

    var bt = braintree;

    braintree.setup(
        serverToken,
        "custom",
        {
            id: domId,
            hostedFields: {
                number: {
                    selector: "#card-number"
                },
                cvv: {
                    selector: "#cvv"
                },
                expirationDate: {
                    selector: "#expiration-date"
                }
            },
            onPaymentMethodReceived: function(details) {
                [e-mail]::onPaymentMethodReceived(Ljava/lang/String;)(details.nonce);
            }
        });
}-/**/;

为什么会这样？我显然是在这里创建表单的-为什么这行不通？

Why is this the case? I'm clearly creating a form here - why is this not working out?

此处，以及文档。

删除上面的检查会给我以下错误，该错误来自 braintree.setup（）：

Removing this check above would give me the following error coming from braintree.setup():

FormNapper requires an HTMLFormElement element or the id string of one.

推荐答案

braintree 应该为 $ wnd.braintree ：如果Braintree运行到隐藏的iframe gwt运行中，则无法通过其ID看到表单。传递表单的元素可能有效，但是Braintree应该注入顶部窗口，而不是GWT的iframe。

braintree should be$wnd.braintree: if Braintree runs into hidden iframe gwt runs in, it cannot see the form through its ID. Passing the form's element might work, but Braintree should be injected into the "top window", not GWT's iframe.

类似地， instanceof 由于iframe边界而无法使用：请使用 $ wnd.HTMLFormElement 。

Similarly, instanceof doesn't work because of iframe boundaries: use $wnd.HTMLFormElement.

关于注入Braintree JavaScript代码：

Regarding the injection of the Braintree JavaScript code:

您可能需要告诉 ScriptInjector 注入 TOP_WINDOW 。例如：

You might need to tell ScriptInjector to inject into the TOP_WINDOW. For example:

braintreeJs = ScriptInjector.fromUrl(BRAINTREE_JS_URL).setCallback(
    new Callback<Void, Exception>() {
        @Override
        public void onFailure(Exception caught) {
            // ..
        }
        @Override
        public void onSuccess(Void result) {
            // ..
        }
    }).setWindow(ScriptInjector.TOP_WINDOW).inject();

这篇关于未捕获的TypeError：FormNapper需要HTMLFormElement元素或id字符串之一的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！