我想通過輸入類型按鈕檢查表單驗證，而不是通過提交，可以在這有任何幫助嗎？

Question

我想只驗證表單，不想提交它，以便我可以通過在表單驗證后調用函數“myfunction（）”來修改表單值來修改同一個html頁面的其他部分。 為此，我想使用一個按鈕，建議我需要code.my代碼如下： -

            <form name="form1">
                <input type="text" name="name1" required></input>
                <button onclick="myfunction()" ></button>        // i want to validation of form by this button
            </form>

Answer 1

你可以通過設置onsubmit事件的形式來return false;來嘗試這個return false; 如下：

<form name="form1" onsubmit="return false;">
    <input type="text" name="name1" required></input>
    <button onclick="myfunction();" ></button>
</form>

這不會在單擊按鈕時提交表單，而是執行myfunction() 。

如果您了解jQuery，那么您可以按如下方式執行此操作：

$('form[name="form1"]').submit(function (event) {
    // This will prevent form being submitted. 
    event.preventDefault();
    // Call your function.
    myfunction();      
});

Answer 2

為了可維護性，請考慮通過選擇而不是內聯向按鈕添加事件偵聽器。 單擊該按鈕時，會將事件對象傳遞給回調。 事件對象具有許多屬性和方法。 在這種情況下，您正在尋找方法“preventDefault”，它阻止事件的默認操作，在本例中是表單提交。 一個例子：

<form name="form1">
  <input type="text" name="name1" required />
  <button id="my-button"></button>
</form>

document.getElementById('my-button').addEventListener('click', function(e){

  e.preventDefault();

  var form = document.forms['form1']; //or this.parentNode

  //do stuff


}, false);

Answer 3

我通過修改代碼實現了這個目標如下： -

          <form name="form1" onsubmit="myfunction();return false;">
          <input type="text" name="name1" required></input>
          <button >check form and call function</button>  
          </form>

通過這個我能夠檢查表格並調用我的功能和表格在這種情況下也沒有提交。 現在我想重置表單而不點擊任何按鈕。 為此建議javascript代碼。