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.

Answer 2

你可以沿着这些方向做点什么。检查每个字段是否为空，如果一个字段为preventDefault以阻止表单提交并显示错误消息

$("input[type=submit]").click(function(e){

  if($("#name").val() == ""){
    e.preventDefault();
    $("#name-error").text("Cant be empty")    
  }else{
    $("#name-error").text("")
  }

  if($("#qualification").val() == ""){
    e.preventDefault();
    $("#qualification-error").text("Cant be empty")    
  }else{
    $("#qualification-error").text("")
  }

  if($("#desc").val() == ""){
    e.preventDefault();
    $("#desc-error").text("Cant be empty")    
  }else{
    $("#desc-error").text("")
  }

});

FIDDLE

Answer 3

您的addAdminValidation123函数未返回任何值。这就是页面允许您提交表单的原因。当你执行＆＃34;返回divTagDisplayHide（5000）;＆＃34;这对于内部函数返回false - 从＆＃34; $（＆＃39; #addadminform＆＃39;）开始的那个函数。找到（＆＃39;输入[type =＆＃34; text＆＃34;] ＆＃39;。）每个（的功能（） {＆＃34;

请尝试以下方法解决问题。

function addAdminValidation123(){ var returnVal = true; $('#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'); returnVal = divTagDisplayHide(5000); } }); return returnVal; }

使用JavaScript验证多个输入字段

3 个答案: