Question

这是HTML；

<form data-test="loginForm-container" novalidate="" method="POST" enctype="multipart/form-data">
    <div class="css-o5d3v1 e1ovefus2">
        <div data-test="guestForm-email-wrapper" class="e1ovefus1 css-yjv4po e1eu3ser1">
            <div class="css-gg4vpm e1eu3ser4">
                <label for="guestForm-email" id="guestForm-email-label" data-test="input-label" class="css-1k1vx4d e1eu3ser5">Email Address*</label>
            </div>
            <div class="css-1tpy6sb e1eu3ser7">
                <input data-test="guestForm-email" aria-invalid="true" aria-required="true" id="guestForm-email" type="email" name="email" required="" aria-labelledby="guestForm-email-label" class="css-15uq4zo e1eu3ser9 error" value="" aria-describedby="guestForm-email-error">
            </div><span data-test="input-error" id="guestForm-email-error" role="alert" class="css-mf5akt e1eu3ser0">Please enter email address</span></div>
    </div>
    <button type="submit" data-test="guestForm-submitButton" class="e1ovefus0 css-1wqqz58 e1y6awi20"><span>Continue as Guest</span></button>
</form>

我尝试了以下内容；

$("button[type=submit]").click(function (event) {
    $('[data-test="loginForm-container"] input[required]').each(function () {
        var hasValue = $(this).val().length;
        var hasRequired = $(this).prop('required');
        var inputClass = '#error-' + $(this).attr('name');

        function validator() 
        {
            if (hasValue == 0) 
            {
                console.log('Step 1');
                $(inputClass).show();
                $(this).addClass('error');
                event.preventDefault();
                return false;
            } 
            else 
            {
                console.log('Step 2');
                $(inputClass).hide();
                $(this).removeClass('error');
                return true;
            }
        }
        if (validator() == true) {
            console.log('Form Submitted');
            $('[data-test="loginForm-container"]').submit();
        }
    });

});

当我单击“以客人身份继续”按钮时，它会打印出步骤1，步骤2，已提交表格。然后，它会刷新页面，好像验证失败一样，不应该只是刷新页面，而应该转到下一页。

任何帮助，谢谢。

Answer 1

为了将1 11 111 1111 11111 111111 1111111 11111111 0000000000111111111 00000000001111111111 000000000011111111111 0000000000111111111111 00000000001111111111111 000000000011111111111111 0000000000111111111111111 00000000001111111111111111 0000000000111111111111111 000000000011111111111111 00000000001111111111111 0000000000111111111111 000000000011111111111 00000000001111111111 0000000000111111111 11111111 1111111 111111 11111 1111 111 11 1提交到form到当前页面以外的任何地方，您需要将目标URL放在表单的post属性中。

Answer 2

它使用React 因此此代码将与您一起使用inshaAllah

var input = document.querySelectorAll('[data-test="guestForm-email"]')[0];
var btn = document.querySelectorAll('[data-test="guestForm-submitButton"]')[0];
var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
nativeInputValueSetter.call(input, 'asdfsadf@asdf.com');
var ev2 = new Event('input', { bubbles: true});
input.dispatchEvent(ev2);
btn.click()

提交表单验证，刷新页面，无法继续

2 个答案: