[英]Jquery validation on submit form
我希望在单击提交按钮时输入框为空时显示相应的错误消息,但是我的下面的代码给了我第一条错误消息,即“请输入问题”。 我哪里做错了
以下是我的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>
如果我理解正确,那么您会遇到问题,因为仅执行第一次验证(至少在我的PC上尝试过代码时就是这种情况)。
我建议您在所有地方都使用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()。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.