jQuery; Submit Form if Required Fields Filled in and Other Combinations Are True

Question

Hello.

I have a form with dozens of fields. Some are required, some are not. With the fields that are required, I have added class="required" to the item

I found this snippet of code and was wondering how to adjust it

$('#form').submit (function() {
  if(formValidated())
    return true;
  return false;
});

I only want to submit the form where all fields that have the class="required" are filled out i.e. not empty. How would I do this?

In addition, I have many radio buttons and if 'Yes' is selected (Defaults to 'No'), then a textarea appears with something similar to the below

$("#rb_name_yes").click(function(){  
  $('#textarea_name').show();
});

I guess I could change this to

$("#rb_name_yes").click(function(){  
  $('#textarea_name').show();
  $(this).addClass('required');
});

and change the code to hide the textarea to

$("#rb_name_no").click(function(){  
  $('#textarea_name').hide();
  $(this).removeClass('required');
});

Does this make sense?

Thanks in advance

Answer 1

I think what you are looking for is jQuery.validation. You'll find information about it on the jQuery site.

Answer 2

If you are not looking for a complex solution like the validate plugin you could use something like:

function formValidated( $form ){
    var empty = 0;
    $(':input,:select', $form).each(function(){
     if( !$(this).val() )
      empty++;
    });
    return (( empty==0 ) ? true : false );
}

It's no flawless tho, it could be improved. Hope it helps.