【问题标题】:HTML required form validation is not giving any warningHTML所需的表单验证没有给出任何警告
【发布时间】:2021-11-20 16:01:37
【问题描述】:

我有一个注册表单,我有 3 个输入。当我将值发布到控制器时它们运行良好,但是当我不填写它们并单击提交按钮时,它不允许我提交此表单。当它不允许我提交它时,它应该给我关于“此字段是必需的”等输入的警告,但它不会给我那个错误。

形式:

<div class="form-container">
    <div class="form-form">
        <div class="form-form-wrap">
            <div class="form-container">
                <div class="form-content">
                    <h1 class="">Get started with a <br /> free account</h1>
                    <p class="signup-link">Already have an account? <a href="auth_login.html">Log in</a></p>
                    <form class="text-left" asp-action="Register" method="post">
                        <div class="form">
                            <div id="username-field" class="field-wrapper input">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                                <input asp-for="User.UserName" type="text" class="form-control" placeholder="Username" required>
                                <span asp-validation-for="User.UserName" class="text-danger"></span>
                            </div>
                            <div id="email-field" class="field-wrapper input">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-at-sign"><circle cx="12" cy="12" r="4"></circle><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path></svg>
                                <input asp-for="User.UserEMail" type="text" value="" placeholder="Email" required>
                                <span asp-validation-for="User.UserEMail" class="text-danger"></span>
                            </div>
                            <div id="password-field" class="field-wrapper input mb-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                                <input asp-for="User.UserPassword" type="password" value="" placeholder="Password" required>
                                <span asp-validation-for="User.UserPassword" class="text-danger"></span>
                            </div>
                            <div class="field-wrapper terms_condition">
                                <div class="n-chk new-checkbox checkbox-outline-primary">
                                    <label class="new-control new-checkbox checkbox-outline-primary">
                                        <input type="checkbox" class="new-control-input">
                                        <span class="new-control-indicator"></span><span>I agree to the <a href="javascript:void(0);">  terms and conditions </a></span>
                                    </label>
                                </div>
                            </div>
                            <div class="d-sm-flex justify-content-between">
                                <div class="field-wrapper toggle-pass">
                                    <p class="d-inline-block">Show Password</p>
                                    <label class="switch s-primary">
                                        <input type="checkbox" id="toggle-password" class="d-none">
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                                <div class="field-wrapper">
                                    <button type="submit" name="Register" class="btn btn-primary">Get Started!</button>
                                </div>
                            </div>

                        </div>
                    </form>
                    <p class="terms-conditions">© 2020 All Rights Reserved. <a href="index.html">CORK</a> is a product of Designreset. <a href="javascript:void(0);">Cookie Preferences</a>, <a href="javascript:void(0);">Privacy</a>, and <a href="javascript:void(0);">Terms</a>.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="form-image">
        <div class="l-image">
        </div>
    </div>
</div>

我认为有些东西可以覆盖这些警告并且不让它们变得可见,但我就是找不到它。当我删除 &lt;span asp-validation-for="****" class="text-danger"&gt;&lt;/span&gt; 时,它仍然是一样的。我不知道我错在哪里,希望有人能帮助我。

【问题讨论】:

    标签: html asp.net-mvc validation required


    【解决方案1】:

    required 属性添加到输入字段。

    布尔值required 属性(如果存在)表示用户必须为输入指定一个值,然后才能提交拥有的表单。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div class="form-container">
            <div class="form-form">
                <div class="form-form-wrap">
                    <div class="form-container">
                        <div class="form-content">
                            <h1 class="">Get started with a <br /> free account</h1>
                            <p class="signup-link">Already have an account? <a href="auth_login.html">Log in</a></p>
                            <form class="text-left" asp-action="Register" method="post">
                                <div class="form">
                                    <div id="username-field" class="field-wrapper input">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                                        <input asp-for="User.UserName" type="text" class="form-control" placeholder="Username" required>
                                        <span asp-validation-for="User.UserName" class="text-danger"></span>
                                    </div>
                                    <div id="email-field" class="field-wrapper input">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-at-sign"><circle cx="12" cy="12" r="4"></circle><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path></svg>
                                        <input asp-for="User.UserEMail" type="text" value="" placeholder="Email" required>
                                        <span asp-validation-for="User.UserEMail" class="text-danger"></span>
                                    </div>
                                    <div id="password-field" class="field-wrapper input mb-2">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                                        <input asp-for="User.UserPassword" type="password" value="" placeholder="Password" required>
                                        <span asp-validation-for="User.UserPassword" class="text-danger"></span>
                                    </div>
                                    <div class="field-wrapper terms_condition">
                                        <div class="n-chk new-checkbox checkbox-outline-primary">
                                            <label class="new-control new-checkbox checkbox-outline-primary">
                                                <input type="checkbox" class="new-control-input">
                                                <span class="new-control-indicator"></span><span>I agree to the <a href="javascript:void(0);">  terms and conditions </a></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="d-sm-flex justify-content-between">
                                        <div class="field-wrapper toggle-pass">
                                            <p class="d-inline-block">Show Password</p>
                                            <label class="switch s-primary">
                                                <input type="checkbox" id="toggle-password" class="d-none">
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                        <div class="field-wrapper">
                                            <button type="submit" name="Register" class="btn btn-primary">Get Started!</button>
                                        </div>
                                    </div>
        
                                </div>
                            </form>
                            <p class="terms-conditions">© 2020 All Rights Reserved. <a href="index.html">CORK</a> is a product of Designreset. <a href="javascript:void(0);">Cookie Preferences</a>, <a href="javascript:void(0);">Privacy</a>, and <a href="javascript:void(0);">Terms</a>.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-image">
                <div class="l-image">
                </div>
            </div>
        </div>
    </body>
    </html>

    【讨论】:

    • 对不起,我只是忘了添加,但错误仍然存​​在
    • 好的,您能否详细说明正在发生的事情或您期望发生的事情?
    猜你喜欢
    • 1970-01-01
    • 2018-07-21
    • 2019-01-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-12-26
    • 2014-02-04
    相关资源
    最近更新 更多