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

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

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>

Answer 3

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");
}
}