Submitting form after validations using jQuery

Question

This is my simple jQuery form validation/submit logic and it is working perfectly fine. But still I am posting this to see if someone check the logic and suggest me if there is any other simple way to get the same results.

In my form I put all input boxes and select into .valid1 class, all checkbox and radio buttons to .valid2 class. I am just wondering is there any way we can do this by putting all input sources under a single class.

 $(document).ready(function(){
 $("#sbutton").click(function(){
 var submitflag = false;
 var validflag = true; 
 validform();
// alert(submitflag);
 if (submitflag){
 $("form").submit();
 }
 function validform(){
 $(".valid1").each(function(){
 if ($(this).find("input").val() === ''){
// alert("I am input"); 
 $(this).find(".error1").html($(this).find("label").html() +" " + "is required");
 validflag = false;
 }else{
 $(this).find(".error1").html(""); 
 }
 if ($(this).find("select").val() === ''){
// alert("I am select"); 
 $(this).find(".error2").html($(this).find("label").html() +" " + "is required");
 validflag = false;
 }else{
 $(this).find(".error2").html(""); 
 }
 });
 $(".valid2").each(function(){
 if (!$(this).find("input:checked").val()){
// alert("I am cbox"); 
 $(this).find(".error3").html($(this).find("label").html() +" " + "is required");
 $(this).find(".error4").html("Agree terms and conditions");
 validflag = false;
 }else{
 $(this).find(".error3, .error4").html(""); 
 } 
 });
 if(validflag){submitflag = true;}
 }
 });
});

• FreeLightman: It would be better if you attached your HTML code. Anyway, it seems to me that you can organize the error divs in one style, so that each error div has the one class.

Answer 1

There is no need for submitflag. The validform function could simply return the value of validflag, which should be declared inside that function, not in the outer scope.

In my form I put all input boxes and select into .valid1 class, all checkbox and radio buttons to .valid2 class. I am just wondering is there any way we can do this by putting all input sources under a single class.

Sure. You just need to adjust some of the dom selectors a little bit, so that they are specific enough to match the right kind of input, for example by adding a condition on the type attribute, to make sure that text input and checkboxes are correctly distinguished.