Submit form validation, refreshes page and fails to proceed

Question

Here is the 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>

I tried the following;

$("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();
        }
    });

});

When I click the button 'continue as guest', it prints out Step 1, Step 2, Form Submitted. It then refreshes the page as if it failed to validate, which it shouldn't just refresh the page, it should go onto the next page.

Anything helps, thanks.

Answer 1

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

Answer 2

it uses React so this code will work with you 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()