【问题标题】:Prevent validation on form.reset()防止对 form.reset() 进行验证
【发布时间】:2016-02-10 16:00:38
【问题描述】:

我有以下html表单:

<body>
    <div>
        <form id="callBackForm" class="custom eight form" method="post" enctype="multipart/form-data" action="thank-you.php">
            <div class="callBackFormDivs"> 
                <div style="padding:0;" class="four mobile-one columns">
                    <label for="name" class="left inline">Name</label>
                </div>
                <div class="eight mobile-three columns">
                    <input class="left" id="name" name="name" required type="text" />
                </div>
            </div>
            <div class="callBackFormDivs">
                <div style="padding:0;" class="four mobile-one columns">
                    <label for="Age" class="left inline">Age</label>
                </div>
                <div class="eight mobile-three columns">
                    <input class="left" id="Age" name="Age" required type="text" />
                </div>
            </div>
            <div class="callBackFormDivs callBackFormButtonContainer">          
                <div>
                    <input type="submit" value="Submit" alt="Submit">
                    <button class="button" style="font-weight:normal; height:34px; float:right;" onClick="fnClearForm()">RESET</button>
                </div>                  
            </div>  
        </form>
    </div>

</body>

请注意,字段上设置了必需的属性。如果用户尝试在不输入任何文本的情况下提交表单,此属性会向用户显示错误消息。

页面上有一个reset按钮,清除字段,使用form.reset()函数,如下:

function fnClearForm()
{
    document.getElementById('callBackForm').reset();                    
}

问题是,当表单重置时,它会触发验证,并向用户显示错误消息。

如何防止这种情况发生?

我知道我可以编写一个自定义验证器,这将解决这个问题,但我认为最好找到一种方法来使此验证正常工作。

我确实找到了一些相关的问题,但没有一个能解决问题。

【问题讨论】:

    标签: javascript html input


    【解决方案1】:

    使用 html 属性 type 创建重置按钮。

    <button type="reset" value="Reset">Reset</button>
    

    http://www.w3schools.com/tags/att_button_type.asp

    小提琴:https://jsfiddle.net/2t2Lhnb8/

    【讨论】:

    • 我无法想象出于任何原因使用其他任何东西来重置定义的表单。除非我明确不想使用按钮控件。
    猜你喜欢
    • 2012-02-21
    • 1970-01-01
    • 2017-08-10
    • 2022-06-24
    • 2013-07-18
    • 1970-01-01
    • 1970-01-01
    • 2012-06-14
    • 1970-01-01
    相关资源
    最近更新 更多