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