Question

我想在单击提交按钮时输入框为空时显示相应的错误消息，但我的下面代码给出了第一条错误消息，即＆＃34;请输入问题＆＃34;。我在哪里做错了

以下是我的HTML和JQUERY代码： HTML：

<form enctype="multipart/form-data" onsubmit=" return ValidateForm(this)" class="form-horizontal" id="PollIndexForm" method="post" action="/polls" accept-charset="utf-8">

 <textarea name="data[Question][question]" id="message1" maxlength="50" onKeyup="return update()" ></textarea> 
 <span class="validate" id="validatemessage1"></span>       

 <input name="data[Option][optiona][]" id="optiona" type="text" class="form-control">
 <span class="validate" id="validateoptiona"></span> 

 <input name="data[Option][optiona][]" id="optionb" type="text" class="form-control">
 <span class="validate" id="validateoptionb"></span> 


 <input class="btn btn-lg btn-primary" type="submit" value="Save" />

JQUERY：

<script>
$(document).ready(function (){

$("#message1").keypress(function(){
   $("#validatemessage1").hide();
});


$("#optiona").keypress(function(){
   $("#validateoptiona").hide();
});



$("#optionb").keypress(function(){
   $("#validateoptionb").hide();
});



$("#optionc").keypress(function(){
   $("#validateoptionc").hide();
});



$("#optiond").keypress(function(){
   $("#validateoptiond").hide();
});



$("#autoreply").keypress(function(){
   $("#validateautoreply").hide();
});



});

function ValidateForm(form){

var message1=document.getElementById("message1").value;
 if(message1==''){
  $(".validate").html("Please enter a question").addClass("ValidationErrors");
   return false;
    }

var optiona=document.getElementById("optiona").value;
 if(optiona==''){
  $(".validate").html("Please enter option A").addClass("ValidationErrors");
   return false;
    }

var optionb=document.getElementById("optionb").value;
 if(optionb==''){
  $(".validate").html("Please enter option B").addClass("ValidationErrors");
   return false;
    }

var optionc=document.getElementById("optionc").value;
 if(optionc==''){
  $(".validate").html("Please enter option C").addClass("ValidationErrors");
   return false;
    }

var optiond=document.getElementById("optiond").value;
 if(optiond==''){
  $(".validate").html("Please enter option D").addClass("ValidationErrors");
   return false;
    }



var autoreply=document.getElementById("autoreply").value;
 if(autoreply==''){
  $(".validate").html("Please enter a autoreply message").addClass("ValidationErrors");
   return false;
    }


}
</script>

Answer 1

如果我理解正确，你就会遇到问题，因为只执行了第一次验证（至少在我在我的电脑上尝试过你的代码就是这种情况）。

我建议你在所有地方都使用jQuery（因为你明显可以部分使用），所以我的建议如下。 HTML：

 <textarea name="data[Question][question]" id="message1" maxlength="50"" ></textarea> 
 <span class="validate" id="validatemessage1">validatemessage1</span>       
</br>
 <input name="data[Option][optiona][]" id="optiona" type="text" class="form-control">
 <span class="validate" id="validateoptiona">validateoptiona</span> 
</br>
 <input name="data[Option][optiona][]" id="optionb" type="text" class="form-control">
 <span class="validate" id="validateoptionb">validateoptionb</span> 


 <input id="submitbtn" class="btn btn-lg btn-primary" type="submit" value="Save" />

的javascript：

$(document).ready(function (){
            $("#message1").keyup(function(){
                console.log("validate");
               $("#validatemessage1").hide();
            });
            $("#optiona").keyup(function(){
               $("#validateoptiona").hide();
            });
            $("#optionb").keyup(function(){
               $("#validateoptionb").hide();
            });

            $("#submitbtn").on("click", function(e){
                if(ValidateForm(("#PollIndexForm")) == false){return false} else {return true};
            });

            function ValidateForm(form){
                var end = true;
                var message1=$("#message1").val();
                console.log("message1: "+message1+"x"+message1.length);
                if(message1.length==0){
                    $("#validatemessage1").html("Please enter a question").addClass("ValidationErrors");
                    $("#validatemessage1").show();
                    end = false;
                }
                var optiona=$("#optiona").val();
                if(optiona==''){
                    $("#validateoptiona").html("Please enter option A").addClass("ValidationErrors");
                    $("#validateoptiona").show();
                    end = false;
                }
                var optionb=$("#optionb").val();
                if(optionb==''){
                    $("#validateoptionb").html("Please enter option B").addClass("ValidationErrors");
                    $("#validateoptionb").show();
                    end = false;
                }
                return end;
            }
        });

这样你每次点击按钮都会通过jQuery处理提交按钮并调用函数ValidateForm。此外，如果您在输入之前清除了该字段，则该消息无法显示，因为它已被隐藏，随后的.html（）函数仅更改其值，因此您需要再次显示.show（）。

提交表单上的Jquery验证

1 个答案: