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

I have this function that returns true only if all input fields are not empty. If the input field is empty, the returned value is "empty field", if is not empty the text "ok" appears.

我有这个函数只有在所有输入字段都不为空时才返回true。如果输入字段为空,则返回值为“空字段”,如果不为空,则显示文本“ok”。

Here u are the Jquery:

在这里你是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;
    }
}

And the html too:

还有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>

It works, but to start the function I need to manually name every #txTargetResult number, as u can see in the html. I would like to find a more dynamic way, without naming the html div.

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

4 个解决方案

#1

You are looping trough all you tagets in the foreach loop, means on each loop step you are adressing a element.

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

Given that you can easily select your elements by choosing this!

鉴于您可以通过选择此选项轻松选择元素!

You can replace your control with $(this).attr("id"), which gets you the id of the current element you are iterating over.

你可以用$(this).attr(“id”)替换你的控件,它可以获得你正在迭代的当前元素的id。

HTML Markup:

<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 Code:

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

});

#2

try;

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

Now you may remove all those id="txTargetResult1", id="txTargetResult2" etc

现在你可以删除所有那些id =“txTargetResult1”,id =“txTargetResult2”等

EDIT

I recommend you to use txTarget.html(''); instead of txTarget.text('');

我建议你使用txTarget.html('');而不是txTarget.text('');

Give it a try and see if this works

试一试,看看是否有效

#3

Use Jquery Validation Plugin

使用Jquery Validation插件

It is dynamic and client side.

它是动态的和客户端。

Validation apply on every form field.

验证适用于每个表单字段。

Refrence link

Hope this help.

希望这有帮助。

#4

The solution is an half way between the answer of Tarekis and Blasteralfred. Using the next() I get the result I was looking for.

解决方案是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;
    }
}

#1