页面存在两个表单时，如何单独提交登录表单？

我有一个登录页面，支持无账号用户注册。注册表单通过Partial View以弹窗Overlay的形式加载，并非嵌套表单，但页面上同时存在两个表单。提交登录时，会因为注册表单的必填字段未填写而被浏览器阻止提交，请问怎么绕过注册表单，正常提交登录表单？

Login 视图代码 #

@page "/login"
@model Login
@{
    Layout = "_LoginRegisterLayout";
}
@section Links {
    <link rel="stylesheet" href="~/styles/login.css" type="text/css" />
    <Link rel="stylesheet" href="~/styles/SignupPartial.css" type="text/css" />
}
<div>
    <div class="header-logged-out">
        <div class="centered-container">
            <a class="header-logo" href="/">
                <img src="~/images/hoook_round_blue.png" alt="hoook header logo" height="50px" width="50px" />
            </a>
        </div>
    </div>
    <div>
        <div class="login-content">
            <div class="login-form-header">
                <h1>Sign in to Hoook</h1>
            </div>
            <div class="login-form-body">
                <form method="post" asp-page="Login">
                    <label asp-for="Email">Email Address</label>
                    <input type="email" asp-for="Email" class="form-input" autofocus autocomplete="email" />
                    <div class="login-position-relative">
                        <label asp-for="Password">Password</label>
                        <input type="password" asp-for="Password" class="form-input" autocomplete="current-password" />
                        <button value="log-in" type="submit" class="submit-btn">Sign in</button>
                        <a class="login-position-absolute login-link" href="">Forgot Password?</a>
                    </div>
                </form>
            </div>
            <div class="login-position-relative login-spacer">
                <span class="login-or">or</span>
            </div>
            <div class="login-create-account">
                <p>New to Hoook? <a href="" class="login-link" id="login-create-account">Create an account.</a></p>
            </div>
        </div>
    </div>
</div>
<partial name="_SignupPartial" model="@(new Signup())" />

Signup Partial 代码 #

@model Signup
<div class="signup-overlay signup-hide">
    <div class="signup-spacer"></div>
    <div class="signup-content">
        <div class="content-control signup-position-relative">
            <div class="signup-header ">Sign Up</div>
            <p class="signup-slogan">It's easy and free to start!</p>
            <svg class="signup-exit" xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 24 24" width="24" fill="currentColor"><path d="M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z"></path></svg>
        </div>
        <div class="message-control">
            <p class="error-message"></p>
        </div>
        <div class="signup-form content-control">
            <form method="post" asp-page="Index" id="signupForm">
                <input type="hidden" asp-for="Token" />
                <input type="text" asp-for="FirstName" class="signup-input signup-form-control" placeholder="First name" required autofocus />
                <input type="text" asp-for="LastName" class="signup-input signup-form-control" placeholder="Last name" required />
                <input type="email" asp-for="Email" class="signup-input signup-form-control" placeholder="Email address" required />
                <input type="password" asp-for="Password" class="signup-input signup-form-control" autocomplete="new-password" placeholder="New password" required minlength="8" />
                <input type="password" asp-for="Confirmation" class="signup-input" autocomplete="new-password" placeholder="Confirm password" required minlength="8" />
                <div class="content-control btn-control">
                    <button value="sign-up" class="submit-btn" type="submit">Sign Up</button>
                </div>
                <input type="hidden" id="returnUrl" name="returnUrl" value='@(ViewContext.ActionDescriptor.AttributeRouteInfo.Template)' />    
            </form>
        </div>
    </div>
</div>

浏览器会检查页面上所有带required属性的表单字段，不管元素是否隐藏。以下是几种实用解决方法：

方法1：弹窗显隐时动态控制required属性 #

通过JavaScript控制，仅当注册弹窗显示时，给表单字段添加required属性；弹窗隐藏时移除该属性，避免登录时触发验证。

示例脚本（添加到登录页面）：

const signupOverlay = document.querySelector('.signup-overlay');
const signupFields = document.querySelectorAll('#signupForm [required]');

// 打开注册弹窗时添加required
document.getElementById('login-create-account').addEventListener('click', function(e) {
    e.preventDefault();
    signupOverlay.classList.remove('signup-hide');
    signupFields.forEach(field => field.setAttribute('required', ''));
});

// 关闭弹窗时移除required
document.querySelector('.signup-exit').addEventListener('click', function() {
    signupOverlay.classList.add('signup-hide');
    signupFields.forEach(field => field.removeAttribute('required'));
});

方法2：给登录提交按钮加formnovalidate属性 #

给登录表单的提交按钮添加formnovalidate属性，告诉浏览器提交时跳过页面所有表单验证：

<button value="log-in" type="submit" class="submit-btn" formnovalidate>Sign in</button>

注意：此方法会同时跳过登录表单自身的验证，若需要保留登录字段验证，不推荐使用。

方法3：动态加载/卸载注册Partial #

不在页面初始化时加载注册Partial，而是当用户点击“创建账号”时通过AJAX动态加载弹窗内容；关闭弹窗时直接移除整个注册表单DOM元素，确保页面仅存在登录表单。

方法4：给注册表单加novalidate属性 #

给注册表单添加novalidate属性，让浏览器默认不验证该表单，之后在注册提交时通过JavaScript手动校验字段：

<form method="post" asp-page="Index" id="signupForm" novalidate>

内容的提问来源于stack exchange，提问作者Duke3e33