Jquery validation on submit form

Question

I want corresponding error message to display when input boxes is empty on submit button clicked but my below code gives me the first error message ie "Please enter a question". Where I am doing wrong

Below is My HTML and JQUERY code: 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

If I understand correctly, you have a problem because only the first validation is executed (at least this was the case when I tried your code on my PC).

What I suggest is that you use jQuery in all places (because you obviously can since you do partially) so my suggestion is the following. 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;
            }
        });

This way you will handle submit button via jQuery and call function ValidateForm every time you click the button. Also, if you had cleared the field before after input, the message didn't show because it was hidden and subsequent .html() function only changes it's value so you need to .show() it again.