如何检查任何文本区域，无线电被检查jquery

Question

我需要用jQuery验证表单。我可以检查我的表格是否为空。在我的表单中，我可以有不同类型的输入元素：文本区域、单选按钮等

我有保存按钮

表单不能使用空值提交。但如果选中了文本区域中的任何一个复选框或复选框中的任何一个(检查所有值并填充所有文本区域不是强制性的，但表单不能为空(

对jquery来说非常陌生，对我来说非常复杂:( 我试过了

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>

任何帮助将不胜感激。

Answer 1

我建议你使用表单的提交事件：

这是空的测试 - 如果填写/检查/选择任何内容，它将允许提交

$("#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>

或者试试这个，它正在计算填充值

$("#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

这里是如何检查textarea、checkbox和textbox的示例。

试试这个。

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

获取您的文本区域值val()函数传递字段的 id(我已用作txt(
单选按钮 $('单选按钮 ID'(.is('：checked'( 将给你真或假。 如果有帮助，请尝试使用以下代码

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