Question

我有这个函数只有在所有输入字段都不为空时才返回true。如果输入字段为空，则返回的值为＆＃34;空字段＆＃34;，如果不为空则文本＆＃34; ok＆＃34;出现。

你在这里是Jquery：

    $(function(){
        $('#btnSubmit').on('click',isEveryInputEmpty); 
    });


    function isEveryInputEmpty() {
    var failCount = ($('#formId input').length)-1; 
    var control = 1;

    $('#formId input').each(function() {

        var txTarget=$('#formId #txTargetResult' + control);

        if ($(this).val() === '') {
            txTarget.text('empty field');
            failCount++;
            control++;
        }else if($(this).val() != '') {
            txTarget.text('ok');
            failCount--;
            control++;        
        }
    });

    if(failCount > 0){
        return false;
    }
}

还有html：

<head>        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
    <body>
        <div class="container">
            <header class="row col-md-offset-2 col-md-12">
                <h1>Form</h1>
            </header>

            <form action="file.php" method="get" id="formId">

                <div class="row">             
                        <input type="text" id="someId" placeholder="1">
                        <div class="target col-md-5" id="txTargetResult1">
                        </div>
                </div>

                 <div class="row">             
                        <input type="text" id="someId" placeholder="2">
                        <div class="target col-md-5" id="txTargetResult2">
                        </div>
                </div>

                 <div class="row">             
                        <input type="text" id="someId" placeholder="3">
                        <div class="target col-md-5" id="txTargetResult3">
                        </div>
                </div>

                 <div class="row">             
                        <input type="text" id="someId" placeholder="4">
                        <div class="target col-md-5" id="txTargetResult4">
                        </div>
                </div>

                <div class="row">
                    <div class="col-md-offset-2 col-md-5">
                        <input type="submit" id="btnSubmit" value="Submit">
                    </div>
                </div>
            </form>


        </div>


        <script type="text/javascript" src="validationcontrol.js"></script>
    </body>
</html>

它可以工作，但是要启动该功能，我需要手动命名每个#txTargetResult数字，正如你在html中看到的那样。我想找到一种更动态的方式，而不是命名html div。

Answer 1

你正在foreach循环中循环所有你的tagets，意味着在每个循环步骤中你正在使用一个元素。

您可以通过选择this来轻松选择元素！

您可以将control替换为$(this).attr("id")，这样可以获得您正在迭代的当前元素的ID。

HTML标记：

<div id="one" class="elementWithID">One</div>
<div id="two" class="elementWithID">Two</div>
<div id="three" class="elementWithID">Three</div>

<!-- For test purposes, the data is written in this div -->

<div id="results"></div>

js代码：

// Get all elements with class elementWithID

var elementsWithID = $(".elementWithID");

// Loop trough all these elements

$.each(elementsWithID,function(){

        // Append the id attribute of a element to the results div
    $("#results").append($(this).attr("id"));       

});

Answer 2

试;

var txTarget = $(this).closest(".target");

现在您可以删除所有id="txTargetResult1"，id="txTargetResult2"等

修改

我建议您使用txTarget.html('');代替txTarget.text('');

尝试一下，看看是否有效

Answer 3

使用Jquery验证插件

这是动态和客户端。
验证适用于每个表单字段。

Refrence link

希望得到这个帮助。

Answer 4

解决方案是Tarekis和Blasteralfred的答案之间的一半。使用next（）我得到了我正在寻找的结果。

function isEveryInputEmpty() {
    var failCount = ($('#formId input').length)-1; 

    $('#formId input').each(function() {
        var txTarget = $(this).next(".target");

        if($(this).val() === '') {
            txTarget.text('empty field');
            failCount++;

        }else if($(this).val() != '') {
            txTarget.text('ok');
            failCount--;      
        }
    });

    if(failCount > 0){
        return false;
    }
}

Jquery验证表单：如果输入字段为空，则执行某些操作，否则执行其他操作。为每个输入做它

4 个答案: