php - 如何检查任何文本区域， radio 被检查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>