How to check any of text area,radio is checked jquery

Question

I need to validate a form with jQuery. I can check whether my form is empty or not.In my form i can have input elements of different types: Textarea, Radio button etc

And i have save button

form can't submit with empty values.but if any one of textarea or anyone of check box is checked (not compulsory to check all values and fill all text area but form can't be empty)

Very new to jquery and its very complicated for me :( I tried

function checkValues() {
  if ($.trim($(this).val()) == '') {
    alert('not okay');
    return false;
  } else {
    alert('okay');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" name="save" value="Open" onClick="checkValues()" class="btn btn-primary">Save</button>

Any help would be appreciated.

Answer 1

I suggest you use the form's submit event:

Here is testing empty - it will allow submission if ANYTHING is filled/checked/selected

$("#form1").on("submit", function(e) {
  var empty = true;
  $(":input").each(function() { // all types of form fields
    if (this.type.indexOf("text") == 0 || this.type == "password") { // text, textarea and password
      empty = $.trim(this.value) == "";
      if (!empty) return false; // leave the each
    } else if (this.type.indexOf("select") == 0) { // select-one/multiple
      empty = this.value == "";
      if (!empty) return false; // leave the each
    } else if (this.type == "checkbox") {
      empty = !this.checked
      if (!empty) return false; // leave the each
    }
  });
  // radios are a special case
  if (empty) { // only bother testing if nothing is filled
    var $radios = $("[type=radio]",this); // all radios in the form
    if ($radios.length > 0) { // any radios?
      empty = $("[type=radio]:checked", this).length==0; // any checked?
    }
  }  
  if (empty) {
    console.log("All fields are empty")
    e.preventDefault(); // cancels the submission
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
  <input type="text" value="" /><br/>
  <textarea></textarea><br/>
  <label>OK? <input type="checkbox" value="OK"/></label><br/>
  <label>Yes <input type="radio" name="rad" value="yes"/></label>
  <label>No  <input type="radio" name="rad" value="no"/><br/></label>
  <select>
    <option value="">Please select</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select><br/>
  <input type="submit" />
</form>

Alternatively try this, which is counting filled values instead

$("#form1").on("submit", function(e) {
  var values = [],
    val = "";
  $(":input").each(function() { // all types of form fields
    if (this.type.indexOf("text") == 0 || this.type == "password") { // text, textarea and password
      val = $.trim(this.value);
      if (val !== "") values.push(val);
    } else if (this.type.indexOf("select") == 0) { // select-one/multiple
      if (this.value !== "") values.push(this.value);
    } else if (this.type == "checkbox") {
      if (this.checked) values.push(this.value);
    }
  });
  var $radios = $("[type=radio]", this); // all radios in the form
  if ($radios.length > 0) { // any radios?
    var $checked = $("[type=radio]:checked", this);
    if ($checked.length > 0) { // any checked?
      $checked.each(function() { values.push(this.value); })
    }
  }
  if (values.length > 0) {
    console.log(values);
    e.preventDefault(); // cancels the submission    
  } else {
    console.log("All fields are empty")
    e.preventDefault(); // cancels the submission
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
  <input type="text" value="" /><br/>
  <textarea></textarea><br/>
  <label>OK? <input type="checkbox" value="OK"/></label><br/>
  <label>Yes <input type="radio" name="really" value="yes"/></label>
  <label>No  <input type="radio" name="really" value="no"/><br/></label>
  <select>
    <option value="">Please select</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select><br/>
  <label>Left <input type="radio" name="direction" value="left"/></label>
  <label>Right  <input type="radio" name="direction" value="right"/><br/></label>
  <input type="submit" />
</form>

Answer 2

Get your textarea value val() function pass field's id (i have used as txt)
for radio button $('radio button id').is(':checked') will give you true or false. Try with the following code if it helps

    function checkValues()
        {
            var textarea = $('#txt').val();
            var isChecked = $('#rdSelect').is(':checked');
            if(textarea == "")
            {
                alert ("textarea required");
            }
            if(isChecked == "false")
            {
                alert ("radio button should be checked");
            }

        }

Answer 3

here is example how you can have checks for textarea, checkbox and textbox.

try this.

function checkValues() {

  if ($("#textarea1").val()) {
    console.log("text area has value")
  } else {
    console.log("text area doesn't have value")
  }

  if ($("#checkbox1").prop("checked")) {
    console.log("chack box is checked")
  } else {
    console.log("chack box is not checked")
  }

  if ($("#text1").val()) {
    console.log("text box has value")
  } else {
    console.log("text box doesn't have value")
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea1" cols=20 rows=10></textarea>
<br/>
<input type="checkbox" id="checkbox1" value="chk_val" /> check me
<br/>
<input type="text" id="text1" placeholder="enter something" />
<br/>
<button type="submit" name="save" value="Open" onClick="checkValues()" class="btn btn-primary">Save</button>