JavaScript-HTML表單驗證不起作用

Question

我試圖驗證表單使用JavaScript，但表單驗證不起作用。不確定，如果它甚至被路由到該函數。這裏是html表單模式。

<div class="modal-body form"> 
       <form action="#" id="form" class="form-horizontal" name="myForm" onsubmit="return validateForm()" ;> 
        <input type="hidden" value="" name="id" /> 
        <div class="form-body"> 

         <div class="form-group"> 
          <label class="control-label col-md-3">Brand Name</label> 
          <div class="col-md-9"> 
           <input required type="text" name="bname" id="brname" class="form-control" placeholder="Name"> 
          </div> 
         </div> 

         <div class="form-group"> 
          <label class="control-label col-md-3">Brand Origin</label> 
          <div class="col-md-9"> 
           <input required type="text" name="origin" id="brorigin" class="form-control" placeholder="Origin"> 
          </div> 
         </div> 

        </div> 
       </form> 

       <div class="modal-footer"> 
        <input type="submit" id="btnSave" value="Submit" onclick="save()" class="btn btn-primary"></input> 
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
       </div> 

      </div> 

這裏是javascript的表單驗證腳本

function validateForm() 
    { 
     $('#btnSave').click(function() 
     { 

      var brname = document.getElementById("brname").value; 
      var brorigin = document.getElementById("brorigin").value; 
      if (brname.length == 0) 
      { 
       window.alert("You must enter a name."); 
       brname.focus(); 
       return false; 
      } 

      if (brorigin.length == 0) 
      { 
       window.alert("You must enter the origin country"); 
       brorigin.focus(); 
       return false; 
      } 
     }); 

    } 

感謝..

編輯：有形式模型prolem。 onclick事件監聽器將保存表單。當我在$(document).ready(function(){函數中移動函數時顯示錯誤警告

Answer 1

第一次嘗試提交表單時，它會將點擊事件偵聽器添加到提交按鈕，但沒有任何東西阻止表單提交。將點擊監聽器移出該功能，並排除該功能。然後，從表單中刪除onsubmit屬性。

$('#btnSave').click(function() { 

     var brname = document.getElementById("brname").value; 
     var brorigin = document.getElementById("brorigin").value; 
     if (brname.length == 0) 
     { 
      window.alert("You must enter a name."); 
      brname.focus(); 
      return false; 
     } 

     if (brorigin.length == 0) 
     { 
      window.alert("You must enter the origin country"); 
      brorigin.focus(); 
      return false; 
     } 
}); 

Answer 2

的validateForm()的代碼將被執行只有當你點擊提交按鈕btnSave。 validateForm()函數只是在點擊時註冊一個事件處理程序，但點擊發生在事件處理程序的註冊之前。並且validateForm可能返回undefined。嘗試把validateForm的或$(document).ready()，或者直接在函數內部的代碼，沒有點擊event.`

function validateForm() 
{ 
     var brname = document.getElementById("brname").value; 
     var brorigin = document.getElementById("brorigin").value; 
     if (brname.length == 0) 
     { 
      window.alert("You must enter a name."); 
      brname.focus(); 
      return false; 
     } 

     if (brorigin.length == 0) 
     { 
      window.alert("You must enter the origin country"); 
      brorigin.focus(); 
      return false; 
     } 

} 

編輯： 的save()函數被調用，即使validateForm回報false因爲你打電話該功能在提交按鈕的onclick事件上。 嘗試在

Answer 3

這兩個更新後的代碼嘗試撥打save()validateForm立即嘗試。

<div class="modal-body form"> 
        <form action="#" id="form" class="form-horizontal" name="myForm"> 
         <input type="hidden" value="" name="id" /> 
         <div class="form-body"> 

          <div class="form-group"> 
           <label class="control-label col-md-3">Brand Name</label> 
           <div class="col-md-9"> 
            <input required type="text" name="bname" id="brname" class="form-control" placeholder="Name"> 
           </div> 
          </div> 

          <div class="form-group"> 
           <label class="control-label col-md-3">Brand Origin</label> 
           <div class="col-md-9"> 
            <input required type="text" name="origin" id="brorigin" class="form-control" placeholder="Origin"> 
           </div> 
          </div> 

         </div> 
        </form> 

        <div class="modal-footer"> 
         <input type="button" id="btnSave" value="Submit" class="btn btn-primary"></input> 
         <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
        </div> 

       </div> 



$('#btnSave').click(function() 
       { 

        var brname =$('#brname').val() 
        var brorigin = $('#brorigin').val() 
        if (brname == '') 
        { 
         window.alert("You must enter a name."); 
         brname.focus(); 
         return false; 
        } 

        if (brorigin == '') 
        { 
         window.alert("You must enter the origin country"); 
         brorigin.focus(); 
         return false; 
        } 

      return true 
       }); 

Answer 4

非常簡單的後續w3school這https://www.w3schools.com/js/js_validation.asp