Question

我正在尝试在jQuery中编写一些表单验证。这是基本的，我只是检查空输入。

但是，我的表单上有三种不同类型的元素：<input type="text">，<select>和<input type="checkbox">。我遇到麻烦让我的验证工作所有这些。

到目前为止，这是我的代码：

偏-HTML

<input type="hidden" name="required" value="title,first_name,family_name,job_title,company_name,country,address_1,town_city,post_code,telephone_2,email,subprimary_activity,subjob_title2,subscription" />

JAVASCRIPT

$("input[name=submit_form]").on("click", function(e) {
    e.preventDefault();
    var missing_items = [];
    var required_array = $("input[name=required]").val().split(",");
    var i;
    for (i = 0; i < required_array.length; i++) {
        var input_name = required_array[i];
        if ($("input[name=" + input_name + "]").val() == "" || $("select[name=" + input_name + "]").val() == "" || !$("input[name=" + input_name + "]").is(":checked")) {
            missing_items.push(input_name);
        }
    }
    alert(missing_items);
});

alert()当前通知我每个元素，无论它是否缺少值/检查。我知道这就是为什么 - 这是因为我的if有三个参数，并且因为某些内容不能是<input> 和一个<select>，所以它始终是评价是真的。

如何重写此功能以便正常运行？有没有办法检查元素输入的类型，或者特定元素是否存在，因此只运行相关的验证？

e.g。

if (is input text) {
    check val() ! empty
}
else if (is select) {
    check val() !empty
}
else if (is input checkbox) {
    check :checked
}

Answer 1

我想我会选择这样的事情：

（虚假代码，请查看doc selectors和each()）

$("input[type=text]").each(
    check val() ! empty
)
$("select").each(
    check val() !empty
)
$("input[type=checkbox]").each(
    check :checked
)

此处为text字段

的代码示例

function f() {
  $("input[type=text]").each(function() {
    alert($(this).val());
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="hello">
<br>
<input type="email" value="test@test.com">
<br>
<input type="text" value="hola">
<br>
<input type="button" onclick="f()" value="run">
<br>

Answer 2

在此处更改您的代码

if ($("input[name=" + input_name + "]").val() == "" || $("select[name=" + input_name + "]").val() == "" || !$("input[name=" + input_name + "]").is(":checked")) {
            missing_items.push(input_name);
        }

到此

var element = $("[name=" + input_name + "]");
if(element.is(":text"))
  // your code
else if (element.is("select")
  // your code
else if (element.is(":checkbox")
  // your code

Answer 3

这就是我的所作所为：

$("input[name=submit_form]").on("click", function(e) {
    e.preventDefault();
    var missing_items = [];
    var $requiredInputs = $("input.required, select.required");

    $requiredInputs.each( function () {
      if ($(this).attr("type") == 'text' && $(this).val().length <= 0) {
        missing_items.push($(this));
      }
        if ($(this).attr("type") == 'checkbox' && !$(this).is(":checked")) {
        missing_items.push($(this));
      }
        if ($(this).is('select') && $(this).val().length <= 0) {
        missing_items.push($(this));
      }
    });

    alert(missing_items);
});

这是一个小提琴：https://jsfiddle.net/s9hd7jjq/2/

稍微修改过的代码版本。我抓住了所有输入并选择了一类所需的输入。然后我使用.each方法遍历每一个，首先检查它的类型，然后是第二个条件是否填充或检查等。如果不是，则将其推入缺失的项目数组。

您可以通过更改每个条件来轻松更改此选项以检查元素是否为空。我认为它应该让你走上正确的道路。

Answer 4

您可以使用以下方法检查输入是否为文本类型： -

if( $(this).is('input') ) // $(this) is your form element
{ 
    // it was an input
}

它可能对你有帮助。

Answer 5

只需检查输入类型，查看其类型属性

即可

function validate( $input )
{
   if ( $input.attr( "type" ) == 'text' && $input.val().length > 0 ) return true;
   if ( $input.attr( "checkbox" ) == 'text' && $input.is(":checked") ) return true;
   if ( $input.prop("tagName") == 'select'&& $input.val().length > 0 ) return true;
  return false;
}

循环使用多种类型的输入

5 个答案: