javascript - 使用 JavaScript 验证多个输入字段

Question

我想使用 JavaScript 和 jQuery 对多个输入字段进行验证。我正在对各个字段进行验证，但是当我单击提交按钮时页面正在加载，因此填充的数据消失了。

我的代码是: HTML:

<form id="addadmin-form" name="addadmin-form" onsubmit="return addAdminValidation123();" method="POST" class="form-horizontal">
<div class="controls">
    <input name="name" id="name" type="text"/>
    <div id="name-error" class="validationerror">
    </div>
</div>
<div class="controls">
    <input name="qualification" id="qualification" type="text"/>
    <div id="qualification-error" class="validationerror">
    </div>
</div>
<div class="controls">
    <input name="desc" id="desc" type="text"/>
    <div id="desc-error" class="validationerror">
    </div>
</div>
<input type="submit" class="btn btn-primary" value="Save"/>

JavaScript:

function addAdminValidation123(){
  $('#addadmin-form').find('input[type="text"]').each(function(){
    var id=$(this).attr("id");
    if($(this).val()=="") {
      document.getElementById(""+id+"-error").innerHTML="PLEASE FILL OUT THIS FIELD !";    
      $('#'+id+'-error').css('display','block');
      return divTagDisplayHide(5000);
    }
  });
}

function divTagDisplayHide(time){
  $(".validationerror" ).each(function(){
    var $this = $(this);
    setTimeout(function() {            
      $this.hide();
    }, time);
  });
  return false;
}

Answer 1

• 在 js 函数之后添加以下 jQuery 代码。
• 并从表单标记中删除 onsubmit 处理程序

这里event.preventDefault();将阻止表单提交和页面加载。

// YOUR JS FUNCTIONS HERE 

$(document).on('submit', '#addadmin-form', function(event){
    event.preventDefault();
    addAdminValidation123();
});
// Still error occurs you can always debug through Firebug Console.