Question

我正在开发一个带有html和jquery的网页。许多页面都有多个输入类型文本的表单。我正在尝试开发一个jquery函数来控制某些输入是空还是错。

我想将所有输入值放在一个数组中。当我尝试读取文本值时遇到麻烦，我得到一个对象htmlinputelement：

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {

        $(':button').click(function () {

            var elems = document.querySelectorAll('input[type=text]');
            var array = jQuery.makeArray(elems);

            jQuery.each(array.valueOf(), function (i, valor) {
                if (valor == "")
                     $('div:last').append("Error " + valor + '<br/>');
            });

        });

    });
</script>

<form action="page.html" method="post">
    <input type="text" name="name" id="name" /><br />
    <input type="text" name="surname" id="surname" /><br />
    <input type="text" name="mail" id="mail" /><br />
    <input type="text" name="number" id="number" /><br />
    <input type="text" name="date" id="date" /><br />
    <input type="text" name="place" id="place" /><br />
    <div class="linea">
        <input type="submit" name="send" value="SEND" />
        <input type="reset" name="clear" value="CLEAR" />
        <input type="button" name="check" value="CHECK" />
    </div>
</form>
<div style="border: solid red; width: 250px; height: 450px;"></div>

我还使用了valor[0].value和valor.eq(0).val()，但我无法获得成功。

我该如何解决？

感谢。

Answer 1

这样做，而不是：

var elems = $('input[type=text]');

要获取每个值，只需循环：

for(var i=0;i<elems.lenght;i++) {
    console.log(elems[i].value);
}

Answer 2

当您使用jQuery时，您可以执行类似这样的操作

$(document).ready(function () {
    $(':button').click(function () {

        // Get the form
        var $form = $(this).closest('form');

        // Loop each input (type=text)
        $form.find('input[type=text]').each(function() {

            // Check the value
            if($(this).val() == "") {
                $('div:last').append("Error " + $(this).val() + "<br/>");
            }// if

       });

    });
});

Fiddle example

希望它可以帮助你。

Answer 3

我想您即将创建验证摘要，但您的代码中存在很多错误！

1）您不需要使用makeArray，因为document.querySelectorAll()会提供数组列表

2）您需要检查.value而不是element本身，请参阅以下内容

if (valor.value == "")
   $('div:last').append("Error " + valor+ '<br/>'); //gives you control validated

所以你的整个代码看起来像

 $(':button').click(function () {
     var elems = document.querySelectorAll('input[type=text]') //input elements
     jQuery.each(elems, function (i, valor) { //i --> index and valor --> HTMLInputElement
         if (valor.value == "") // check value is blank
             $('div:last').append("Error " + valor.value + '<br/>'); // log that control  
                                                                        or it's value
     });
});

jsFiddle Example

注意：小提琴会将输入元素附加到没有值的div。

<强>更新

如果你想发布它，你只需要使用serialize()序列化它。

只需使用

$(form).serialize()

要验证表单字段，您可能必须使用jQuery validate plugin。

Answer 4

这是一个不错的解决方案

http://jsfiddle.net/cceg9Ldp/2/

HTML

<form action="page.html" method="post">
    <input type="text" name="name" id="name" data-error='Please Add Name'/><br />
    <input type="text" name="mail" id="mail" data-error='Please Add Email'/><br />
    <div>
        <input type="submit" name="send" value="SEND" />
        <input type="reset" name="clear" value="CLEAR" />
        <input type="button" name="check" value="CHECK" />
    </div>
</form>

<div id="errorMsg"></div>

CSS

input[type=text].error {border:1px solid red;}

的jQuery

$(document).ready(function () {
    $(':button').click(function () {
        //Clear Errors
        $('#errorMsg').empty();
        // Remove Input Error
        $('input[type=text]').removeClass('error');
        // Loop through inputs
        $('input[type=text]').each(function() {
            // Get Error Message
            var errorMsg = $(this).attr('data-error');
            // If Empty
            if($(this).val() == "") {
                // Add Error Class
                $(this).addClass('error');
                // Append Error Message
                $('#errorMsg').append(errorMsg+'<br/>');  
            }
       });

    });
});

我无法获得对象htmlinputelement jquery的值

4 个答案:

jsFiddle Example