jQuery獲取具有特定參數的子元素數量

Question

我有以下代碼，在提交表單時執行。 但是以下邏輯是不正確的，因為其目的是開發一種通用功能，該功能適用​​於DOM中的所有表單。 經過一遍又一遍的故障處理后，我最終創建了此函數，該函數特定於此表單，該函數驗證表單中輸入字段的值是否與其自定義defVal屬性相同，如果是，則表單將停止提交，並且將顯示錯誤消息彈出。

我的問題包括以下內容：如何檢查表單中的任何子元素是否滿足特定參數，例如作為輸入字段並具有其.val（）== .attr（'defVal'）？

我已經嘗試使用.find（）、. children（）和.childNode功能。 有人可以建議我一個好的解決方案，如果可能的話，請解釋您的代碼

HTML：

<div class="login" align="center">
<div class="formWrapper">
    <form action="index.php?r=backoffice" method="post">
        <input type="text" name="USERNAME" required value="username" defval="username" maxlength="16">
        <input type="password" name="PASSWORD" required value="password" defval="password" maxlength="16">
        <input type="reset" value="reset">
        <input type="submit" value="submit">
        <hr/>
        <a href="#" class="helpLink">Can't log in?</a>
    </form>
</div>
<div class="infoWrapper">
    <div class="info">

    </div>
</div>

jQuery的：

$('div.login').ready(function(){
$('div.login form').submit(function(e){
    if( $('div.login form input').val()==$('div.login form input').attr('defVal') ){
        var numMsgs=$('div.login form').children();
        if( numMsgs.length<=6 ){
            var formHtml=$('div.login form').html();
            $('div.login form').html('<a class="sysMsg" href="#">error::invalid username/password</a>'+formHtml);
            $('div.login form a.sysMsg').addClass('errFatal').fadeIn(300).delay(5000).fadeOut(300);
        }
    e.preventDefault();
    }
});

}）;

Answer 1

嘗試（此模式）

$(function () {
    var elems = $(".login input[defval]");
    console.log(elems.length);
    $.each(elems, function (i, el) {
        if ($(el).val() === $(el).attr("defval")) {
            // do stuff
            console.log(i, $(el).val() === $(el).attr("defval"), $(el));
        };
    });
});

jsfiddle http://jsfiddle.net/guest271314/9578v/

Answer 2

在主題上睡覺之后，我最終設法完成了任務。 我改變了一些HTML。 無論如何，謝謝您的建議，因為它非常有用，實際上還教給我一些東西。

HTML：

<div class="login" align="center">
<div class="formWrapper">
    <form action="index.php?r=backoffice" method="post">
        <p class="jQueryErr">
        <?php
            if( !empty($_POST['USERNAME']) && !empty($_POST['PASSWORD']) ){
                phpClass::USER_login($_POST['USERNAME'],'username',$_POST['PASSWORD'],'password');
            }
        ?>
        </p>
        <input type="text" name="USERNAME" value="username" defval="username" maxlength="16">
        <input type="password" name="PASSWORD" value="password" defval="password" maxlength="16">
        <input type="reset" value="reset">
        <input type="submit" value="submit">
        <hr/>
        <a href="#" class="helpLink">Can't log in?</a>
    </form>
</div>

jQuery的：

$('form').submit(function(e){
    var elems=$(this).find('input[defval]');
    var errWrapper=$(this).find('p.jQueryErr');
    for( var i=0; i<elems.length; i++ ){
        if( $(elems[i]).val()==$(elems[i]).attr('defVal') ){
            $(errWrapper[0]).html('<a class="sysMsg errWarning" href="#">error:: invalid username/password</a>');
            var formSysMsg=$('p.jQueryErr a.sysMsg');
            $(formSysMsg[0]).fadeIn(300).delay(5000).fadeOut(300);
            e.preventDefault();
            break;
        }else if( $(elems[i]).val().length<8 ){
            $(errWrapper[0]).html('<a class="sysMsg errWarning" href="#">error::'+ $(elems[i]).attr('defVal') +'::is too short!</a>');
            var formSysMsg=$('p.jQueryErr a.sysMsg');
            $(formSysMsg[0]).fadeIn(300).delay(5000).fadeOut(300);
            e.preventDefault();
            break;
        }
    }
});