防止在form.reset（）上進行驗證

Question

我有以下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>

請注意，在字段上設置了必填屬性。 如果用戶嘗試提交表單而不輸入任何文本，則此屬性向用戶顯示錯誤消息。

頁面上有一個重置按鈕，它使用form.reset()函數清除字段，如下所示：

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

問題是，當表單重置時，它將導致驗證觸發，並向用戶顯示錯誤消息。

我該如何預防？

我知道我可以編寫一個自定義驗證器來解決此問題，但是我認為最好找到一種使此驗證正常工作的方法。

我確實找到了一些相關的問題，但是沒有一個人解決了這個問題。

Answer 1

使用html屬性type創建一個重置按鈕。

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

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

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

防止在form.reset（）上進行驗證

問題描述

1 個解決方案

解決方案1
3 已采納 2016-02-10 16:04:37

防止在form.reset（）上進行驗證

問題描述

1 個解決方案

解決方案1 3 已采納 2016-02-10 16:04:37

解決方案1
3 已采納 2016-02-10 16:04:37