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

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

为了将form提交post到当前页面以外的任何地方，您需要将目标 URL 放在表单的action属性中。

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()